Flutter网络请求的所有姿势

前言

编写一个 App，最离不开的就是网络请求了。在Android 原生中，网络请求库一直在更新，网络请求库甚多：HttpUrlConnection、HttpClient、Volley、Okhttp、Retrofit...
Flutter 才出来没多久，普及率也不是很高，网络请求大致分为三种方式：

Dart 原生的网络请求 HttpClient
库 http
Flutter中文网发布的 dio

本文分别介绍这三种网络请求方式的 GET 和 POST。

一、原生方式

1.1 get 请求

先上代码：

  void getNet_1() async {
    var client = new HttpClient();
    var request = await client.getUrl(Uri.parse(url_1));
    var response = await request.close();
    if (response.statusCode == HttpStatus.ok) {
      _content = await response.transform(Utf8Decoder()).join();
    }
  }

async 和 await 表示异步
需要引入的包：

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

pubspec.yaml 文件不需要修改

Dart 语言出来的时间比较晚，吸收了前辈语言们的经验，Java 的原生网络请求代码可是一大截，Dart 语言的简简单单的几行，非常现代化。

1.2 post 请求

原生的网络请求虽然有 post 方法，但是对 post 请求支持不是很友好，在网上找了很久也没找到案例，最后在 stackoverflow 上找到一篇文章：
https://stackoverflow.com/questions/21491543/how-to-do-post-in-dart-command-line-httpclient
还是用其他的网络请求方式-_-||

二、库 http

2.1 get 请求

代码如下：

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

代码量比原生的简洁很多，然而还可以更简洁

  void getNet_2_easy() {
    http.Client()
        .get(url_2)
        .then((http.Response response) {
              _content = response.body;
    });
  }

导包：

import 'package:http/http.dart' as http;

pubspec.yaml 以前要添加依赖，现在不要了,如果需要如下：

http: '>=0.11.3+12'

2.2 post 请求

  void postNet_2() 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;
  }

这代码量跟 Java 相比，简直不要太爽。
最开始这里我遇到一个坑，我是这么写的：

http.post(url, body: JSON.encode({'username': 'hellonews','password':'123456'}))

返回的数据死活说账号密码错误，后面发现是表单提交。。。-_-||
http 的 post 源码中有这个一个注释：

If [body] is a Map, it's encoded as form fields using [encoding]. The
content-type of the request will be set to
"application/x-www-form-urlencoded";

意思大概是：如果你 post 上来的 body 是一个 Map，它会自动转换成表单提交。
我在 dio 中使用这个 Map 却死活说账号密码错误，最后发现 dio 表单使用另一种方式。

三、库 dio

3.1 get 请求

代码如下：

  void getNet_3() async {
    Dio dio = new Dio();
    var response = await dio.get(url_3);
    _content = response.data.toString();
  }

pubspec.yaml 要添加依赖：

dependencies:
  ······
  dio: ^1.0.9

导包：

import 'package:dio/dio.dart';

3.2 post 请求

  void postNet_3() async {
    FormData formData = new FormData.from({
      "username": "hellonews",
      "password": 123456,
    });
    var dio = new Dio();
    var response = await dio.post(url_post, data: formData);
    _content = response.data.toString();
  }

对比 dio 和 http 两个库，发现他们其实使用方式差不多，http 还不要加依赖，那我为什么要用dio 呢？
从 dio 的官方 Github 上 copy 它的介绍来回答这个问题：

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

非常明了吧，dio 其实就相当于现在 Android 流行的 Okhttp + Retrofit。
所以我们为了省事，还是用 dio 吧。

完

本文 Github 地址如下：
https://github.com/ldlywt/flutter_demo
本文 post 请求的接口调试来自鸿洋大神的
http://wanandroid.com/blog/show/2

最后编辑于：2018.11.22 10:26:03