Flutter(5)-网络请求

本篇文章主要给大家介绍一下Flutter中的网络请求，就说一下比较火的两个Flutter中开源的网络请求框架，这些开源都可以在-pub.dev-中搜到。
。

• http
• dio

1.http

http是官方提供的一个网络框架，Github主页在这里，我们来个简单的代码示例:

_httpGet()
  async {
    var url = 'https://www.apiopen.top/satinGodApi';
    var response = await http.get(url);
    print('Response status: ${response.statusCode}');
    print('Response body: ${response.body}');
  }

里面大家看到了一些眼熟的东西，比如async，是个程序员都会知道是异步的意思，然后的await意思就是要等到这个请求的结果再继续往下走，在http的这个网络请求中async和await会成对的出现。
在官方的介绍中我们看到还可以直接执行多个依赖请求：

var client = new http.Client();
try {
  var uriResponse = await client.post('https://example.com/whatsit/create',
      body: {'name': 'doodle', 'color': 'blue'});
  print(await client.get(uriResponse.bodyFields['uri']));
} finally {
  client.close();
}

2.dio

dio是Flutter中文网开源的一个网络请求框架，在http的基础上做了很多实用的封装，让开发者在使用中更加的方便、简练。Github链接地址这里有官方的使用介绍。

_dioHttpGet() async {
    Dio dio = new Dio(); // with default Options
    dio.options.baseUrl = "https://www.apiopen.top";
    Response response= await dio.get("/satinGodApi");
    print(response.data.toString());
  }

dio 和 http 两个库，发现他们其实使用方式基本一致，http 还不用加依赖，那么这个dio的意义何在？在dio的githubz主页上我们可以清楚的看到它的介绍：

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...

发起一个 POST 请求:
response = await dio.post("/test", data: {"id": 12, "name": "wendu"});
发起多个并发请求:
response = await Future.wait([dio.post("/info"), dio.get("/token")]);

dio 其实就相当于 Android上流行的 Okhttp + Retrofit，非常的强大和方便，所以我们在真正的项目中很大部分人会直接使用dio来作为网络请求库。
来个简单的对dio进行的封装，封装一层，在后面的开发中如果出现需要换库好处理点：

class BoxDioTool {

  static Dio boxDio;

  static const String API_HostUrl = 'https://www.apiopen.top/'; //主host
  static const int CONNECT_Timeout = 5000;  //链接超时时间设置
  static const int RECEIVE_Timeout = 5000;  //接收超时时间设置

  /// 定义各种请求方法
  static const String GET = 'get';
  static const String POST = 'post';
  static const String PUT = 'put';
  static const String PATCH = 'patch';
  static const String DELETE = 'delete';

  /// 封装一个request方法供外部使用
  //url 请求链接
  //parameters 请求参数
  //metthod 请求方式
  //onSuccess 成功回调
  //onError 失败回调
  static request(String url,
      {parameters,
        method = 'GET',
        Function(T t) onSuccess,
        Function(String error) onError}) async {

    parameters = parameters ?? {};
    /// 请求处理
    parameters.forEach((key, value) {
      if (url.indexOf(key) != -1) {
        url = url.replaceAll(':$key', value.toString());
      }
    });

    debugPrint('请求方法：' + method);
    debugPrint('请求地址：' + url);
    debugPrint('请求参数：' + parameters.toString());

    Dio dio = shareInstance();
    var result;
    try {
      Response response = await dio.request(url,
          data: parameters, options: new Options(method: method));
      result = response.data;
      if (response.statusCode == 200) {
        if (onSuccess != null) {
          onSuccess(result);
        }
      } else {
        throw Exception('statusCode:${response.statusCode}');
      }
      debugPrint('返回数据：' + response.toString());
    } on DioError catch (e) {
      debugPrint('出错了：' + e.toString());
      onError(e.toString());
    }
  }

  /// 创建 dio 实例对象
  static Dio shareInstance() {
    if (boxDio == null) {
      var options = BaseOptions(
        headers: {'BoxSign':"ali666"}, //自定义请求头
        connectTimeout: CONNECT_Timeout,
        receiveTimeout: RECEIVE_Timeout,
        responseType: ResponseType.plain,
        validateStatus: (status) {
          return true;
        },
        baseUrl: API_HostUrl,
      );
      boxDio = new Dio(options);
    }
    return boxDio;
  }
}

使用的时候就很简单了：

_boxDioGet() {
     BoxDioTool.request('satinGodApi',parameters:{'a':'2'},
      onSuccess: (data) {
      print('成功回调'+data.toString());
    },
      onError: (error) {
        print('出错回调'+error);
      },);
  }

在上面封装的方法里面，请求方法默认是get，所以示例中没有传递method参数，如果没有parameters，就可以精简到BoxDioTool.request('satinGodApi',onSuccess: (data) {...。这样封装一下使用起来还是很方便的。
所有的代码都可以在Github:BoxJ/Flutter-daydayup中下载，本篇代码的文件夹是boxdemo_005，欢迎一起交流!