Flutter 网络请求之Dio库

媒介

  迩来再写Flutter系列文章，在了解过状态管理之后，我们再来学习一下网络请求。
正文

  网络请求对于一个线上的App来说是必不可少的，那么Flutter中的网络请求同样也是官方的没有第三方的那么好用，这里我们使用Dio，现在来说比较好用简便的网络库。
一、配置项目

  起首我们创建一个名为study_http的项目。

创建项目之后，我们配置一下依赖库，在项目标pubspec.yaml文件中，添加如下所示代码：

1. dependencies:
2.   
3.   get:
4.   
5.   dio: ^5.4.0

复制代码

添加位置如下图所示：

然后点击Pub get，获取并安装所添加的库，安装成功之后，项目配置完成。
二、网络请求

  下面我们来计划一个场景，页面上有一个图片和一个按钮，默认表现一个图片，点击按钮之后请求网络接口，返回一个图片，将这个请求返回的网络图片表现出来，起首我们在lib下新建一个https的目录，然后这个目录下新建一个https_page.dart文件 ，内里代码如下所示：

1. import 'dart:convert';
2. import 'package:flutter/material.dart';
3. import 'package:dio/dio.dart';
4. import 'package:get/get.dart';
6. class HttpsPage extends StatelessWidget {
7.   var imgPath =
8.       "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1h31Ip.img?w=768&h=1226&m=6&x=326&y=887&s=506&d=118"
9.           .obs;
11.   final dio = Dio();
13.   void request() async {
14.     var response = await dio.get('https://www.dmoe.cc/
15. random.php?return=json
17. ');
18.     //转化为Json
19.     String jsonString = jsonEncode(response.data);
20.     print(jsonString);
21.     // 解析JSON字符串
22.     Map<String, dynamic> json = jsonDecode(jsonString);
23.     // 获取特定字段值
24.     imgPath.value = json['imgurl'];
25.   }
27.   @override
28.   Widget build(BuildContext context) {
29.     return Scaffold(
30.         body: Center(
31.       child: Container(
32.         child: Column(
33.           mainAxisAlignment: MainAxisAlignment.center,
34.           children: [
35.             Obx(() => Image.network(
36.                   imgPath.value,
37.                   width: 200,
38.                 )),
39.             SizedBox(height: 10),
40.             ElevatedButton(
41.               onPressed: () {
42.                 request();
43.               },
44.               child: Text("请求网络"),
45.             )
46.           ],
47.         ),
48.       ),
49.     ));
50.   }
51. }

复制代码

  说明一下这个代码，这里使用了Get库，不了解的可以看看我上一篇文章：Flutter 状态管理之GetX库，创建了一个可观察的变量，然后写了一个请求网络的方法，使用了Dio库的Get请求，请求一个API地址，你可以将这个地址在浏览器中测试，确保它可以返回值。这是我请求的结果，如下图所示：

  通过网络请求会返回一个response 对象，我们将对象转换为Json字符串，然后再获取字符串中的imgurl的值，也就是这个图片的网络地址链接，末了再更新这个imgPath的值，Obx()包裹的内容就会刷新，下面我们运行一下看看效果：

这是默认的图片，然后点击一下请求网络的按钮，经过短暂的网络耽误之后就会加载出网络请求返回后的图片，如下图所示：

这个请求返回的图片类似于逐日一图，以是厘革很大，因此你只要有加载出来就可以，不须要跟我一样。
三、封装

  在对Dio库举行进使用用的时间，我们通常会举行封装而不是直接使用。Flutter原生的网络请求是使用HttpClient，使用起来相称繁琐，因此Dio对于HttpClient举行了封装，那么我们为什么还须要对Dio举行封装呢？这就是考虑到现实中的业务处理了，封装都是针对于现实情况来的，下面我们看看怎么封装这个Dio库。
① 单例模式

  在使用网络请求时，通常会有多个网络请求，我们可以写一个单例，将一些根本的内容写在单例内里，写几个方法供其他地方调用，下面我们起首来写一个单例在lib下新建一个net包，包下新建一个network_manager.dart文件，代码如下所示：

1. import 'package:dio/dio.dart';
3. /// 网络管理
4. class NetworkManager {
5.   static NetworkManager? _instance = NetworkManager._internal();
7.   late Dio dio;
9.   static NetworkManager getInstance() {
10.     _instance ??= NetworkManager._internal();
11.     return _instance!;
12.   }
14.   NetworkManager._internal() {
15.     // 配置BaseOptions
16.     BaseOptions options = BaseOptions(
17.         baseUrl: "",
18.         //连接超时
19.         connectTimeout: const Duration(seconds: 15),
20.         //接收超时
21.         receiveTimeout: const Duration(seconds: 10),
22.         //内容类型
23.         contentType: 'application/json;Charset=UTF-8',
24.         //响应数据类型：Json
25.         responseType: ResponseType.json);
26.     dio = Dio(options);
27.   }
29.   get(String url, {option, params}) async {
30.     Response response;
31.     try {
32.       response =
33.           await dio.get(url, options: Options(responseType: ResponseType.json));
34.       print("response.data:${response.data}");
35.       print("response.data:${response.statusCode}");
36.       print("response.data:${response.statusMessage}");
37.       print("response.data:${response.headers}");
38.     } on Exception catch (e) {
39.       print("Get方法出错:${e.toString()}");
40.     }
41.   }
42.   
43. }

复制代码

  下面说明一下上面代码，起首我们写了一个getInstance()方法，在这内里判断_instance 是否为空，为空则NetworkManager._internal()，对dio举行一些根本的配置，然后初始化dio 对象，不为空则，直接返回_instance 。然后写了一个get()方法，方法内里就是一个get请求，我们在之前已经页面中已经写好了，同时我们打印一下返回的数据，下面我们在前面的页面中改造一下。修改https_page.dart中的request()方法，代码如下所示：

1.   void request() async {
2.     NetworkManager.getInstance().get('https://www.dmoe.cc/
3. random.php?return=json
5. ');
6.   }

复制代码

这里就是直接使用单例中的方法，我们就不须要再当前页面创建dio对象了，运行一下，看控制台日志，如下图所示：

现在我们的方法在单例中有效果，我们继续往下走。
② 网络拦截器

  现在的这个日志确实不怎么好看，为了解决这个问题，也为了我们看日志的时间一目了然，我们可以自定义一个拦截器，在net包下新建一个interceptor包，该包下新建一个custom_interceptor.dart文件，内里的代码如下所示：

1. import 'dart:convert';
3. import 'package:dio/dio.dart';
4. import 'package:flutter/foundation.dart';
6. ///日志拦截器
7. class CustomInterceptor extends Interceptor {
8.   @override
9.   void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
10.     StringBuffer buffer = StringBuffer();
11.     buffer.write('⌈‾‾ Request ヾ(•ω•`)o \n');
12.     buffer.write('| \n');
13.     buffer.write('| - Url：   ${options.baseUrl + options.path}\n');
14.     buffer.write('| - Method：${options.method}\n');
15.     buffer.write('| - Header：${options.headers.toString()}\n');
16.     final data = options.data;
17.     if (data != null) {
18.       if (data is Map) {
19.         buffer.write('| - Body：  ${options.data.toString()}\n');
20.       } else if (data is FormData) {
21.         final formDataMap = {}
22.           ..addEntries(data.fields)
23.           ..addEntries(data.files);
24.         buffer.write("| - Body：  ${formDataMap.toString()}\n");
25.       } else {
26.         buffer.write("| - Body：  ${data.toString()}\n");
27.       }
28.     }
29.     buffer.write(
30.         '⌊_____________________________________________________________________');
31.     printDebugLog(buffer);
32.     return handler.next(options);
33.   }
35.   @override
36.   void onResponse(Response response, ResponseInterceptorHandler handler) {
37.     StringBuffer buffer = StringBuffer();
38.     buffer.write('⌈‾‾ Response O(∩_∩)O \n');
39.     buffer.write('| \n');
40.     buffer.write('| - Code：   ${response.statusCode}\n');
41.     buffer.write('| - CodeMsg：${response.statusMessage}\n');
42.     buffer.write('| - Header：\n');
43.     response.headers.forEach((key, value) {
44.       buffer.write('|    $key  $value\n');
45.     });
46.     final data = response.data;
47.     if (data != null) {
48.       if (data is Map) {
49.         buffer.write('| - Data：  ${response.data.toString()}\n');
50.         String dataJson = jsonEncode(response.data);
51.         buffer.write('| - Json：  $dataJson\n');
52.       } else if (data is FormData) {
53.         final formDataMap = {}
54.           ..addEntries(data.fields)
55.           ..addEntries(data.files);
56.         buffer.write("| - Data：  ${formDataMap.toString()}\n");
57.       } else {
58.         buffer.write("| - Data：  ${data.toString()}\n");
59.       }
60.     }
61.     buffer.write(
62.         '⌊_____________________________________________________________________');
63.     printDebugLog(buffer);
64.     return handler.next(response);
65.   }
67.   @override
68.   void onError(DioException err, ErrorInterceptorHandler handler) {
69.     //处理错误信息
70.     handlerError(err);
71.     StringBuffer buffer = StringBuffer();
72.     buffer.write('⌈‾‾ Error (っ °Д °;)っ\n');
73.     buffer.write('| \n');
74.     buffer.write('| - ExceptionType：${err.type.name}\n');
75.     buffer.write('| - ErrorMsg：     ${err.message}\n');
76.     buffer.write('| - StatusCode：   ${err.response?.statusCode}\n');
77.     buffer.write('| - StatusMsg：    ${err.response?.statusMessage}\n');
78.     buffer.write(
79.         '⌊_____________________________________________________________________');
80.     printDebugLog(buffer);
81.     return handler.next(err);
82.   }
84.   ///处理错误信息 --自行去实现里面的功能代码
85.   void handlerError(DioException err) {
86.     switch (err.type) {
87.       //连接超时
88.       case DioExceptionType.connectionTimeout:
89.         break;
90.       //响应超时
91.       case DioExceptionType.receiveTimeout:
92.         break;
93.       //发送超时
94.       case DioExceptionType.sendTimeout:
95.         break;
96.       //请求取消
97.       case DioExceptionType.cancel:
98.         break;
99.       //错误响应 404 等
100.       case DioExceptionType.badResponse:
101.         break;
102.       //错误证书
103.       case DioExceptionType.badCertificate:
104.         break;
105.       //未知错误
106.       default:
107.         break;
108.     }
109.   }
111.   void printDebugLog(StringBuffer buffer) {
112.     if (kDebugMode) {
113.       print(buffer.toString());
114.     }
115.   }
116. }

复制代码

  在这内里我们继承了创建CustomInterceptor 类，继承Dio的Interceptor ，重写内里onRequest（请求前）、onResponse（响应前）、onError（错误时）的拦截方法，在内里对于相关数据信息举行打印，同时只在debug模式下打印，下面我们回到NetworkManager中，使用这个自定义拦截器。

1. import 'interceptor/custom_interceptor.dart';

复制代码

起首导包，然后在_internal()方法中增加如下代码：

1.     //添加日志拦截器
2.     dio.interceptors.add(CustomInterceptor());

复制代码

添加位置如下图所示：

再将get方法中的打印注释掉

然后我们重新运行一下，请求网络接口，查看控制台日志，如下图所示：

这样看起来是否会清晰一些呢，可以自行调解，我们接着往下走。
③ 返回值封装

  对返回值的封装，我们可以分为两步，第一步就是在响应前封装，第二步在响应后转换。先来看第一步，在net包下新建一个response包，该包下新建一个base_response.dart，代码如下所示：

1. ///自定义响应封装
2. class BaseResponse<T> {
3.   //状态码
4.   final int? code;
5.   //状态描述
6.   final String? msg;
7.   //数据
8.   final T data;
10.   BaseResponse({required this.code,required this.msg,required this.data});
12.   @override
13.   String toString() {
14.     StringBuffer buffer = StringBuffer();
15.     buffer.write('{');
16.     buffer.write('"code":$code');
17.     buffer.write('"msg":"$msg"');
18.     buffer.write('"data":"$data"');
19.     buffer.write('}');
20.     return super.toString();
21.   }
22. }

复制代码

  这里就是对默认的Response举行一次封装，然后这里的data就是我们接口所拿到的返回值， 下面我们改动一下之前的自定义拦截器custom_interceptor.dart中的代码，主要就是修改onResponse()方法，代码如下：

1.   @override
2.   void onResponse(Response response, ResponseInterceptorHandler handler) {
3.     //返回自定义的Base
4.     final baseResponse = BaseResponse(code: response.statusCode, msg: response.statusMessage, data: response.data);
5.     response.data = baseResponse;
7.     StringBuffer buffer = StringBuffer();
8.     buffer.write('⌈‾‾ Response O(∩_∩)O \n');
9.     buffer.write('| \n');
10.     buffer.write('| - Code：   ${response.statusCode}\n');
11.     buffer.write('| - CodeMsg：${response.statusMessage}\n');
12.     buffer.write('| - Header：\n');
13.     response.headers.forEach((key, value) {
14.       buffer.write('|    $key  $value\n');
15.     });
16.     final data = response.data;
17.     if (data != null) {
18.       if (data is Map) {
19.         buffer.write('| - Data：  ${response.data.toString()}\n');
20.         String dataJson = jsonEncode(response.data);
21.         buffer.write('| - Json：  $dataJson\n');
22.       } else if (data is FormData) {
23.         final formDataMap = {}
24.           ..addEntries(data.fields)
25.           ..addEntries(data.files);
26.         buffer.write("| - Data：  ${formDataMap.toString()}\n");
27.       } else {
28.         buffer.write("| - Data：  ${baseResponse.data.toString()}\n");
29.       }
30.     }
31.     buffer.write(
32.         '⌊_____________________________________________________________________');
33.     printDebugLog(buffer);
34.     return handler.next(response);
35.   }

复制代码

焦点代码就是这一段

  将response.data封装到BaseResponse中，然后再赋值返回。然后我们再对返回值举行一个JSON转Bean的操纵，AS中提供了一个插件，FlutterJsonBeanFactory，安装。

  安装好之后，我们可以重启一下AS，然后就来根据JSON返回值构建Dart的Bean。在lib包下新建一个model包，然后鼠标右键model包，点击New → JsonToDartBeanAction，如下图所示：

输入文件名称，然后将接口返回的JOSN：

1. {
2.     "code": "200",
3.     "imgurl": "https://image.baidu.com/search/down?url=https://tvax3.sinaimg.cn//large/a15b4afegy1fmvk16yis3j21hc0u0tpx.jpg",
4.     "width": "1920",
5.     "height": "1080"
6. }

复制代码

赋值进去，如下图所示：

点击Make，完成构建。

  构建之后会在model包下天生一个img_entity.dart，我刚才输入的是img，_entity是这个插件本身添加的，然后会天生一个generated文件夹，内里可以看到一个img_entity.g.dart文件，内里的内容就是对你JSON和Bean之间的转化代码的天生，我们不须要关心。先不急着使用这个返回值，我们继续往下走。
④ 封装请求

  接着我们封装请求方法，针对网络请求有get、post、put等等方式，在dio库中，最终现实上调用的都是request请求，在net包下新建一个method包，该包下新建一个bese_method.dart，代码如下：

1. enum BaseMethod {
2.   get,
3.   post,
4.   put,
5.   delete,
6.   patch,
7.   head
8. }

复制代码

  这里代码很简朴，就是列举了dio的网络请求方式，然后我们回到network_manager.dart中，在内里新增一个request()方法，其他的代码也做了修改，整体代码如下所示：

1.   class NetworkManager {
3.   factory NetworkManager() => _getInstance();
4.   static NetworkManager? _instance = NetworkManager._initialize();
6.   late Dio _dio;
8.   static NetworkManager _getInstance() {
9.     _instance ??= NetworkManager._initialize();
10.     return _instance!;
11.   }
13.   NetworkManager._initialize() {
14.     // 配置BaseOptions
15.     BaseOptions options = BaseOptions(
16.         baseUrl: "",
17.         //连接超时
18.         connectTimeout: const Duration(seconds: 15),
19.         //接收超时
20.         receiveTimeout: const Duration(seconds: 10),
21.         //内容类型
22.         contentType: 'application/json;Charset=UTF-8',
23.         //响应数据类型：Json
24.         responseType: ResponseType.json);
25.     _dio = Dio(options);
26.     //添加日志拦截器
27.     _dio.interceptors.add(CustomInterceptor());
28.   }
30.   ///网络请求
31.   Future<T> request<T>(String path,
32.       {BaseMethod method = BaseMethod.get, Map<String, dynamic>? params,
33.       data, Options? options}) async {
34.     const methodValues = {
35.       BaseMethod.get: 'get',
36.       BaseMethod.post: 'post',
37.       BaseMethod.put: 'put',
38.       BaseMethod.delete: 'delete',
39.       BaseMethod.patch: 'patch',
40.       BaseMethod.head: 'head',
41.     };
43.     options ??= Options(method: methodValues[method]);
44.     try {
45.       Response response;
46.       response = await _dio.request(path,
47.           data: data, queryParameters: params, options: options);
48.       return response.data;
49.     } on DioException catch (e) {
50.       throw e;
51.     }
52.   }
53. }

复制代码

下面我们再回到https_page.darat中去使用，修改request()方法，代码如下所示：

1.   void request() async {
2.     BaseResponse response = await NetworkManager().request('https://www.dmoe.cc/
3. random.php?return=json
5. ');
6.     ImgEntity imgEntity = ImgEntity.fromJson(response.data);
7.     imgPath.value = imgEntity.imgurl;
8.   }

复制代码

假如有报错留意一下导包

1. import '../model/img_entity.dart';

复制代码

运行一下，效果和之前是一样的，然后我们再来改动一下，针对于这个API地址：

1. https://www.dmoe.cc/
2. random.php?return=json

复制代码

我们可以分为两部门。
基础地址

1. https://www.dmoe.cc/

复制代码

功能地址

1. random.php?return=json

复制代码

  一般的项目中，基础地址不会经常变，也就是ip地址，而不同的功能会根据现实情况去改变接口，因此这一部门我们须要和现实方法举行绑定，下面我们在NetworkManager中增加一行代码：

1. final _mBaseUrl = "https://www.dmoe.cc/
2. ";

复制代码

然后修改baseUrl的值，之前是空字符串，如下图所示：

再去修改现实调用的地方，如下图所示：

  这样就对一个API地址举行了分离，这在现实开发中是很常见的做法。对于dio的封装就到这里了，肯定不是美满了，因为还有许多东西没有考虑到，我们可以根据现实中的须要再去添加，我这里就不赘述了，下面我们联合GetX去使用。
四、联合GetX使用

在https包下新建一个https_controller.dart，代码如下：

1. import 'package:get/get.dart';import '../model/img_entity.dart';
2. import '../net/network_manager.dart';import '../net/response/base_response.dart';class HttpsController extends GetxController {  var imgPath =      "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1h31Ip.img?w=768&h=1226&m=6&x=326&y=887&s=506&d=118"          .obs;  void request() async {    BaseResponse response = await NetworkManager().request('random.php?return=json
3. ');    ImgEntity imgEntity = ImgEntity.fromJson(response.data);    imgPath.value = imgEntity.imgurl;  }}

复制代码

这里就是将网络请求相关的变量和方法都放到HttpsController 中，然后我们再回到HttpsPage，修改代码如下所示：

1. import 'package:flutter/material.dart';
2. import 'package:get/get.dart';
3. import 'https_controller.dart';
5. class HttpsPage extends StatelessWidget {
6.   final httpsController = Get.put(HttpsController());
8.   @override
9.   Widget build(BuildContext context) {
10.     return Scaffold(
11.         body: Center(
12.       child: Container(
13.         child: Column(
14.           mainAxisAlignment: MainAxisAlignment.center,
15.           children: [
16.             Obx(() => Image.network(
17.                   httpsController.imgPath.value,
18.                   width: 200,
19.                 )),
20.             SizedBox(height: 10),
21.             ElevatedButton(
22.               onPressed: () => httpsController.request(),
23.               child: Text("请求网络"),
24.             )
25.           ],
26.         ),
27.       ),
28.     ));
29.   }
30. }

复制代码

主要改动地方如下图所示：

这样根本上就符合现在的开发理念了，数据和UI举行分离，再次运行，效果依然一样，好了，本篇文章就到这里。
五、源码

源码地址：study_http

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。