flutter网络请求基础知识铺垫、及实战举例

flutter网络请求

一、基础知识

1.Response响应
Response是对象类型是javax.servlet，主要的功能包括：

功能	举例
设置响应头信息	response.addHeader(“Content-type”,“text/html;charset=utf-8”);
设置状态码	response.setStatus(200);设置状态码
设置响应正文	response.setContentType(“text/html;charset=utf-8”);
重定向	response.sendRedirect(“重定向的URL”);

响应正文:response有两个响应流，一个是字符流，一个是字节流在调用getWrite()方法之前使用setCharacterEncoding()来设置字符流编码，如果不设置默认是iso-8859-1。response.setCharacterEncoding("utf-8");

2.async、await、Future

① async 异步 （规则：可以等待未来或不等待未来，不影响其他人也不受其他人的影响）
② await 等待 （等待未来；等待可以能是想要的结果或意想不到的结果）
③ Future 未来 （一种结果）

Flutter给我们提供了Future对象以及async和await关键字来支持异步编程
Future是一个抽象类

    //延迟3秒执行
    Future.delayed(Duration(seconds: 3), () {
      //跳转至应用首页
      NavigatorUtil.goShopMainPage(context);
    });

3.http网络请求架构

var url = "http://127.0.0.1:3000/getHttpData";
http.get(url).then((res){
	print("状态:${res.statusCode}");
	ptint("正文:${res.body}")
})

4.HttpClient网络请求架构

void getHttpClientData() async{
//需要异步执行
	HttpClient http = HttpClient();//实例化对象
	var request = await http.getUrl(Uri.parse("地址"));
	var response = await request.close();
	var result = await response.transform(utf8.decoder).json();
	printf(result);
}

5.Dio网络请求架构

最简单的请求

   _getDate()async{
     var url = "http://172.18.1.64:8080/client/catalog/getfirstcategory";
     Dio dio = Dio();
     var response = await dio.get(url);
   }

稍微封装的dio请求

Future request(url,{formData})async{
	try{
		Response response;
		Dio dio = Dio();
		dio.options.contentType = ContentType.parse("application/x-www-from-urlencoded");
		response = await dio.get(url,data:fromData);
		if(response.statusCode==200){
			return response;
		}else{
			throw Exception("接口异常")；
		}catch(e){
			return print("error::${e}");
		}
	}
}

6.typedef

Dart中一切皆对象，函数也是对象。每个对象都有自己的类型，函数的类型是Function，typedef就是给Function取个别名，如

typedef int Compare(Object a,Object b);

这样就可以使用Compare来声明一个函数变量，如

Compare compare;

二、请求本地自己编写的json文件

我这取名叫shop.json

{
  "data": [
    {
      "name": "ƻ��",
      "image": "https://img-blog.csdnimg.cn/dd7ef8859850417ab6f20b36d7276ab0.png",
      "oriPrice": 14,
      "presentPrice": 20,
      "goodsID": "001"
    }
  ]
}

打开git输入

npx json-server shop.json

dart io发起请求
1.1.get请求

import 'dart:io';//导IO包
import 'dart:convert';//解码和编码JSON

main(){
  _get();
}
_get() async{
  var responseBody;
  //1.创建HttpClient
  var httpClient = new HttpClient();
  //2.构造Uri
  var requset = await httpClient.getUrl(Uri.parse("http://localhost:3000/data"));
  //3.关闭请求，等待响应
  var response = await requset.close();
  //4.进行解码，获取数据
  if(response.statusCode == 200){
      //拿到请求的数据
      responseBody = await response.transform(utf8.decoder).join();
      //先不解析打印数据
      print(responseBody);
  }else{
    print("error");
  }
}

dio请求

在平时开发中最好用dio库和http库，因为dart io中是使用HttpClient发起的请求，HttpClient本身功能较弱，很多常用功能不支持。

在pubspec.yaml添加依赖：

dio: ^2.0.14

dio_post() async{
  try{
    Response response;
    response = await Dio().post("http://localhost:3000/data");
    if(response.statusCode == 200){
      print(response);
    }else{
      print("error");
    }
  }catch(e){
    print(e);
  }
}

//http库的get请求方式
http_get() async{
  try{
    //因为导入http 用了as xxx方式，所以对象请求都用xxx.get方式
    var response = await my_http.get("http://localhost:3000/data");
    if(response.statusCode == 200){
      //打印返回的数据
      print(response.body);
    }else{
      print("error");
    }
  }catch(e){
    print(e);
  }
}

官网
由于weui不支持flutter2.0及以上版本，特开发替代版本tdui，官网：https://tdui.td0f7.cn/

三、实战举例

一开始对接口简单的不带参数请求数据
带参数的请求

发现每次都是同样的根地址，同样的创建dio数据，所以我们要进行封装
首先创建一个homePage.dart文件用来写页面
创建一个HomeService类，用于对home页面需要的接口进行请求

typedef OnSuccessList<T>(List<T> list);
typedef OnSuccess<T>(T t);
typedef OnFail(String message);
class HomeService{
	Future queryHomdeData(OnSuccess OnSuccess,OnFail OnFail) scync{
	try{
		//首页数据接口调用
		var response = await HttpUtil.instance.get(ServerUrl.HOME_URL);
		 if (response['errno'] == 0) {
		 HomeModel homeModel = HomeModel.fromJson(response["data"]);
		 //调用成功回调方法返回数据
		 onSuccess(homeModel);
		 }else{
		 onFail(response["errmsg"]);
		 }
		}catch(e){
		print(e);
		onFail("异常");
		}
	}
}
//服务端接口地址
class ServerUrl {
  static const String BASE_URL = 'http://172.18.1.64:8080/client';//基础地址
  static const String HOME_URL = BASE_URL+'/home/index';//首页数据
  }

HttpUtil.dart

var dio;
class HttpUtil{
	//获取HttpUtil实例
	static HttpUtil get instance=>_getInstance();
	//定义HttpUtil实例
	static HttpUtil _httpUtil;
	static HttpUtil _getInstance(){
	if(_httpUtil == null){
		_httpUtil = HttpUtil();
		}
		return _httpUtil;
	}
	//构造方法
	HttpUtil(){
	//选项
	BaseOptions options = BaseOptions(
	//连接超时
	connectTimeout:5000,
	//接收超时
	receiveTimeout:5000
		);
	dio = Dio(options);
	}
	//封装get请求
  Future get(String url,
      {Map<String, dynamic> parameters, Options options}) async {
    //返回对象
    var response;
    //判断请求参数并发起get请求
    if (parameters != null && options != null) {
      response =
          await dio.get(url, queryParameters: parameters, options: options);
    } else if (parameters != null && options == null) {
      response = await dio.get(url, queryParameters: parameters);
    } else if (parameters == null && options != null) {
      response = await dio.get(url, options: options);
    } else {
      response = await dio.get(url);
      print(response);
    }
    //返回数据
    return response.data;
  }

  //封装post请求
  Future post(String url,
      {Map<String, dynamic> parameters, Options options}) async {
    //返回对象
    Response response;
    //判断请求参数并发起post请求
    if (parameters != null && options != null) {
      response = await dio.post(url, data: parameters, options: options);
    } else if (parameters != null && options == null) {
      response = await dio.post(url, data: parameters);
    } else if (parameters == null && options != null) {
      response = await dio.post(url, options: options);
    } else {
      response = await dio.post(url);
    }
    //返回数据
    return response.data;
  }
}

类似

homePage.dart使用这个类

  //首页数据接口服务
  HomeService _homeService = HomeService();
  //首页数据模型
  HomeModel _homeModel;
    @override
  void initState() {
    super.initState();
    // _controller.finishRefresh();
    _queryHomeData();
  }
    //查询首页数据
  _queryHomeData() async {
     _homeService.queryHomeData((success) {
       setState(() {
         print(success);
         _homeModel = success;
       });
     }, (error) {
       //弹出错误信息
       ToastUtil.showToast(error);
     });
  }

这里给的部分代码，主要是对请求的封装方便使用