Flutter 网络请求框架封装

Flutter 请求网络的三种方式

flutter 请求网络的方式有三种，分别是 Dart 原生的网络请求 HttpClient、第三方网络请求 http以及 Flutter 中的 Dio。我们可以比较一下这三种网络请求方式，然后封装为我们方便请求网络的工具类。

Dart 原生的网络请求 HttpClient

实现 Dart 获取网络数据的请求，一般我们需要以下几个步骤：

• step 1： 原生的网络请求时不需要修改 pubspec.yaml 文件的，我们只需要在使用的地方引入所需包就可以了

import 'dart:convert';
import 'dart:io';

• step 2：创建一个HttpClient

HttpClient httpClient = new HttpClient();

• step 3: 打开Http连接，设置请求头

HttpClientRequest request = await httpClient.getUrl(uri);

在这一步中，我们可以设置人意的的请求方法，比如 Get 请求、Post 请求、Delete 请求。

例如：携带参数的请求

Uri uri=Uri(scheme: "https", host: "flutterchina.club", queryParameters: {
    "userName":"chen",
    "password":"123456"
  });

例如：设置请求的 header

request.headers.add("user-agent", "test");
request.headers.add("Authorization", "LKSJDLFJSDLKJSLKklsdj");

• step 4: 等待连接服务器

HttpClientResponse response = await request.close();

• step 5: 读取响应内容

if (response.statusCode == HttpStatus.ok) {
      _content = await response.transform(Utf8Decoder()).join();
}

• step 6: 断开连接

httpClient.close();

以上的步骤是 dart 简单获取网络的方式，我们从上面可以看到，通过 HttpClient 发起网络请求时比较麻烦的，很多都要我们亲手处理，还有 Cookie 的管理也是比较麻烦的。

库 http

• step 1：pubspec.yaml 添加依赖

  http: ‘>=0.11.3+12’

• step 2: 在使用的地方导包

  import ‘package:http/http.dart’ as http;

• step 3： 发起请求

Get 请求

void getRequest() async {
    var client = http.Client();
    http.Response response = await client.get(url_2);
    _content = response.body;
  }

Post 请求

  void postRequest() async {
    var params = Map<String, String>();
    params["username"] = "hellonews";
    params["password"] = "123456";

    var client = http.Client();
    var response = await client.post(url_post, body: params);
    _content = response.body;
  }

相对比 Dart 原生的网络请求，第三方库 http 的网络请求方式是要方便好多，写起来也是挺爽的。

Flutter 发布的 dio

Dio 一个强大的 Dart Http 请求库，支持 Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等…

• 1：pubspec.yaml 添加依赖

dependencies:
  dio: ^1.0.9

• step 2：导入引用包

import 'package:dio/dio.dart';

• step 3：发起网络请求

Get 请求

void getRequest() async {
    Dio dio = new Dio();
    var response = await dio.get("/test?id=12&name=chen");
    _content = response.data.toString();
  }

对于 query 参数，我们可以通过对象来进行传递，上面的代码等同于：

void getRequest() async {
    Dio dio = new Dio();
    var response = await dio.get("/test"，data:{"id":12,"