通过上一节介绍,我们可以发现直接使用HttpClient发起网络请求是比较麻烦的,很多事情得我们手动处理,如果再涉及到文件上传/下载、Cookie管理等就会非常繁琐。幸运的是,Dart社区有一些第三方http请求库,用它们来发起http请求将会简单的多,本节我们介绍一下目前人气较高的dio库。

dio是一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等。dio的使用方式随着其版本升级可能会发生变化,如果本节所述内容和dio官方有差异,请以dio官方文档为准。

引入

引入dio:

  1. dependencies:
  2. dio: ^x.x.x #请使用pub上的最新版本

导入并创建dio实例:

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

接下来就可以通过 dio实例来发起网络请求了,注意,一个dio实例可以发起多个http请求,一般来说,APP只有一个http数据源时,dio应该使用单例模式。

示例

发起 GET 请求 :

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

对于GET请求我们可以将query参数通过对象来传递,上面的代码等同于:

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

发起一个 POST 请求:

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

发起多个并发请求:

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

下载文件:

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

发送 FormData:

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

如果发送的数据是FormData,则dio会将请求header的contentType设为“multipart/form-data”。

通过FormData上传多个文件:

  1. FormData formData = new FormData.from({
  2. "name": "wendux",
  3. "age": 25,
  4. "file1": new UploadFileInfo(new File("./upload.txt"), "upload1.txt"),
  5. "file2": new UploadFileInfo(new File("./upload.txt"), "upload2.txt"),
  6. // 支持文件数组上传
  7. "files": [
  8. new UploadFileInfo(new File("./example/upload.txt"), "upload.txt"),
  9. new UploadFileInfo(new File("./example/upload.txt"), "upload.txt")
  10. ]
  11. });
  12. response = await dio.post("/info", data: formData)

值得一提的是,dio内部仍然使用HttpClient发起的请求,所以代理、请求认证、证书校验等和HttpClient是相同的,我们可以在onHttpClientCreate回调中设置,例如:

  1. (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
  2. //设置代理
  3. client.findProxy = (uri) {
  4. return "PROXY 192.168.1.2:8888";
  5. };
  6. //校验证书
  7. httpClient.badCertificateCallback=(X509Certificate cert, String host, int port){
  8. if(cert.pem==PEM){
  9. return true; //证书一致,则允许发送数据
  10. }
  11. return false;
  12. };
  13. };

注意,onHttpClientCreate会在当前dio实例内部需要创建HttpClient时调用,所以通过此回调配置HttpClient会对整个dio实例生效,如果你想针对某个应用请求单独的代理或证书校验策略,可以创建一个新的dio实例即可。

怎么样,是不是很简单,除了这些基本的用法,dio还支持请求配置、拦截器等,官方资料比较详细,故本书不再赘述,详情可以参考dio主页:https://github.com/flutterchina/dio 。 下一节我们将使用dio实现一个分块下载器。

实例

我们通过Github开放的API来请求flutterchina组织下的所有公开的开源项目,实现:

  1. 在请求阶段弹出loading
  2. 请求结束后,如果请求失败,则展示错误信息;如果成功,则将项目名称列表展示出来。

代码如下:

  1. class _FutureBuilderRouteState extends State<FutureBuilderRoute> {
  2. Dio _dio = new Dio();
  3. @override
  4. Widget build(BuildContext context) {
  5. return new Container(
  6. alignment: Alignment.center,
  7. child: FutureBuilder(
  8. future: _dio.get("https://api.github.com/orgs/flutterchina/repos"),
  9. builder: (BuildContext context, AsyncSnapshot snapshot) {
  10. //请求完成
  11. if (snapshot.connectionState == ConnectionState.done) {
  12. Response response = snapshot.data;
  13. //发生错误
  14. if (snapshot.hasError) {
  15. return Text(snapshot.error.toString());
  16. }
  17. //请求成功,通过项目信息构建用于显示项目名称的ListView
  18. return ListView(
  19. children: response.data.map<Widget>((e) =>
  20. ListTile(title: Text(e["full_name"]))
  21. ).toList(),
  22. );
  23. }
  24. //请求未完成时弹出loading
  25. return CircularProgressIndicator();
  26. }
  27. ),
  28. );
  29. }
  30. }