Flutter實(shí)戰(zhàn) Http請(qǐng)求-Dio http庫

通過上一節(jié)介紹，我們可以發(fā)現(xiàn)直接使用 HttpClient 發(fā)起網(wǎng)絡(luò)請(qǐng)求是比較麻煩的，很多事情得我們手動(dòng)處理，如果再涉及到文件上傳/下載、Cookie 管理等就會(huì)非常繁瑣。幸運(yùn)的是，Dart 社區(qū)有一些第三方 http 請(qǐng)求庫，用它們來發(fā)起 http 請(qǐng)求將會(huì)簡(jiǎn)單的多，本節(jié)我們介紹一下目前人氣較高的dio (opens new window)庫。

dio 是一個(gè)強(qiáng)大的 Dart Http 請(qǐng)求庫，支持 Restful API、FormData、攔截器、請(qǐng)求取消、Cookie 管理、文件上傳/下載、超時(shí)等。dio 的使用方式隨著其版本升級(jí)可能會(huì)發(fā)生變化，如果本節(jié)所述內(nèi)容和 dio 官方有差異，請(qǐng)以 dio 官方文檔為準(zhǔn)。

#引入

引入 dio:

dependencies:
  dio: ^x.x.x #請(qǐng)使用pub上的最新版本

導(dǎo)入并創(chuàng)建 dio 實(shí)例：

import 'package:dio/dio.dart';
Dio dio =  Dio();

接下來就可以通過 dio 實(shí)例來發(fā)起網(wǎng)絡(luò)請(qǐng)求了，注意，一個(gè) dio 實(shí)例可以發(fā)起多個(gè) http 請(qǐng)求，一般來說，APP 只有一個(gè) http 數(shù)據(jù)源時(shí)，dio 應(yīng)該使用單例模式。

#示例

發(fā)起 GET 請(qǐng)求 :

Response response;
response=await dio.get("/test?id=12&name=wendu")
print(response.data.toString());

對(duì)于GET請(qǐng)求我們可以將 query 參數(shù)通過對(duì)象來傳遞，上面的代碼等同于：

response=await dio.get("/test",queryParameters:{"id":12,"name":"wendu"})
print(response);

發(fā)起一個(gè) POST 請(qǐng)求:

response=await dio.post("/test",data:{"id":12,"name":"wendu"})

發(fā)起多個(gè)并發(fā)請(qǐng)求:

response= await Future.wait([dio.post("/info"),dio.get("/token")]);

下載文件:

response=await dio.download("https://www.google.com/",_savePath);

發(fā)送 FormData:

FormData formData = new FormData.from({
   "name": "wendux",
   "age": 25,
});
response = await dio.post("/info", data: formData)

如果發(fā)送的數(shù)據(jù)是 FormData，則 dio 會(huì)將請(qǐng)求 header 的contentType設(shè)為“multipart/form-data”。

通過 FormData 上傳多個(gè)文件:

FormData formData = new FormData.from({
   "name": "wendux",
   "age": 25,
   "file1": new UploadFileInfo(new File("./upload.txt"), "upload1.txt"),
   "file2": new UploadFileInfo(new File("./upload.txt"), "upload2.txt"),
     // 支持文件數(shù)組上傳
   "files": [
      new UploadFileInfo(new File("./example/upload.txt"), "upload.txt"),
      new UploadFileInfo(new File("./example/upload.txt"), "upload.txt")
    ]
});
response = await dio.post("/info", data: formData)

值得一提的是，dio 內(nèi)部仍然使用 HttpClient 發(fā)起的請(qǐng)求，所以代理、請(qǐng)求認(rèn)證、證書校驗(yàn)等和 HttpClient 是相同的，我們可以在onHttpClientCreate回調(diào)中設(shè)置，例如：

(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
    //設(shè)置代理 
    client.findProxy = (uri) {
      return "PROXY 192.168.1.2:8888";
    };
    //校驗(yàn)證書
    httpClient.badCertificateCallback=(X509Certificate cert, String host, int port){
      if(cert.pem==PEM){
      return true; //證書一致，則允許發(fā)送數(shù)據(jù)
     }
     return false;
    };   
  };

注意，onHttpClientCreate會(huì)在當(dāng)前 dio 實(shí)例內(nèi)部需要?jiǎng)?chuàng)建 HttpClient 時(shí)調(diào)用，所以通過此回調(diào)配置 HttpClient 會(huì)對(duì)整個(gè) dio 實(shí)例生效，如果你想針對(duì)某個(gè)應(yīng)用請(qǐng)求單獨(dú)的代理或證書校驗(yàn)策略，可以創(chuàng)建一個(gè)新的 dio 實(shí)例即可。

怎么樣，是不是很簡(jiǎn)單，除了這些基本的用法，dio 還支持請(qǐng)求配置、攔截器等，官方資料比較詳細(xì)，故本書不再贅述，詳情可以參考dio 主頁 。 下一節(jié)我們將使用 dio 實(shí)現(xiàn)一個(gè)分塊下載器。

#實(shí)例

我們通過 Github 開放的 API 來請(qǐng)求 flutterchina 組織下的所有公開的開源項(xiàng)目，實(shí)現(xiàn)：

1. 在請(qǐng)求階段彈出 loading
2. 請(qǐng)求結(jié)束后，如果請(qǐng)求失敗，則展示錯(cuò)誤信息；如果成功，則將項(xiàng)目名稱列表展示出來。

代碼如下：

class _FutureBuilderRouteState extends State<FutureBuilderRoute> {
  Dio _dio = new Dio();


  @override
  Widget build(BuildContext context) {


    return new Container(
      alignment: Alignment.center,
      child: FutureBuilder(
          future: _dio.get("https://api.github.com/orgs/flutterchina/repos"),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            //請(qǐng)求完成
            if (snapshot.connectionState == ConnectionState.done) {
              Response response = snapshot.data;
              //發(fā)生錯(cuò)誤
              if (snapshot.hasError) {
                return Text(snapshot.error.toString());
              }
              //請(qǐng)求成功，通過項(xiàng)目信息構(gòu)建用于顯示項(xiàng)目名稱的ListView
              return ListView(
                children: response.data.map<Widget>((e) =>
                    ListTile(title: Text(e["full_name"]))
                ).toList(),
              );
            }
            //請(qǐng)求未完成時(shí)彈出loading
            return CircularProgressIndicator();
          }
      ),
    );
  }
}