Flutter dio 库封装并实现网络请求及 Json 数据解析示例

墨蓝 2023-07-24 08:13 21阅读 0赞

### 文章目录 ###

*   *   *  dio
         *  基本使用
         *  封装使用
         *  JSON 数据解析
         *   *  使用示例：

> 上篇文章介绍了本地存储数据，少量的数据我们才会放在本地，大部分的数据都是放在远程的服务器中。因此这就涉及到了如何和网络交互。`Flutter dart:io`库默认提供 `HttpClient`可以访问网络数据，但是`httpClient`使用相对复杂一些，于是`Dart` 官方提供的另一个网络请求库`http`， `HttpClient 和 http`这二者对于网络请求的定制化相对薄弱一些，于是`Flutter中文开发者社区`提供了另一个网络请求库`dio` ，由于`dio`使用简便，可定制的功能较丰富，文章这里直接介绍 `dio` 的使用和封装。

### dio ###

> `README`中是这么介绍的：`dio`是一个强大的`Dart Http`请求库，支持`Restful API`、`FormData`、拦截器、请求取消、`Cookie`管理、文件上传/下载、超时、自定义适配器等…

### 基本使用 ###

1.  添加依赖： **[dio][]**

dependencies:
      dio: ^3.0.9

1.  导包使用

import 'package:dio/dio.dart';
     void getHttp() async {
        try {
          Response response = await Dio().get("http://www.baidu.com");
          setState(() {
            mContext = response.toString();
          });
        } catch (e) {
          print(e);
        }
      }

点击按钮之后将网络请求返回的`response`写入`Text`组件中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]

> 一般网络请求库我们都会封装之后再使用。一是为了满足业务方便使用，二是为了扩展性后续有新的网络请求框架可以方便替换。

### 封装使用 ###

> 查看 `dio`中的 `README`可以看出支持的功能还是很全的。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]  
> 我们常用的也就`get、post`请求，以及`Cookie`的处理。

这里参考了两个大佬写的文章：

*  [Flutter 网络请求封装之Dio（Cookie管理、添加拦截器、下载文件、异常处理、取消请求等）][Flutter _Dio_Cookie]
 *  [Flutter Dio二次封装][Flutter Dio]

具体的实现代码请查看 **[Flutter-WanAndroid][]** `lib/api`包下的代码

封装之后使用的示例：

> 可以看出我们在请求的时候添加了加载框的效果。  
> ![在这里插入图片描述][20200413004203568.gif]

在实际中我们几乎不直接返回`Html`格式的数据，一般都是返回定义好的`Json`数据，那么如何解析返回的`Json`数据呢？

### JSON 数据解析 ###

> 在`AndroidStudio`中可以使用一些插件辅助将`Json`数据生成实体类对象。  
> 我们可以从插件的下载数以及更新时间上去选择，`FlutterJsonBeanFactory`目前是使用最多且更新时间最近的。我是很久就安装了`flutter_json_format`，但是用着不顺手，后来换了`FlutterJsonHelper`之后用着还行就没更换了。下面就介绍怎么将网络返回的`Json`数据通过`FlutterJsonHelper`转为实体类。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]

#### 使用示例： ####

> 获取 [玩Android 网站][Android] 中 积分排行榜的接口，并将接口返回的 `JSON` 转为实体类，最后展示在页面上。

效果图如下：  
![在这里插入图片描述][20200414184357952.gif]

实现过程如下：

1.  为了方便 我直接在`wanandroid`上调用`api`获取返回的`json`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]
2.  创建`coin.dart`文件，将返回的`json`串复制，然后在`coin.dart`文件右键选择`Generate-->JsonToDartClass`，然后在弹窗中将`json`串粘贴进去，点击`ok`即可。生成的实体类最终如下图所示。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]
3.  数据实体类已经生成了，接下来我们来实现`积分排行榜`的展示页面。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 5]  
    主要是通过`ListView`来承载列表数据，列表中的`item`使用`ListTile`组件实现。阴影效果使用的是`BoxShadow`来实现。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 6]  
    完整代码实现请查看 **[Flutter-WanAndroid][]** 项目中的`views/coin_rank_page/coin_rank_page.dart`文件
4.  实现上拉、下拉加载数据  
    这里使用的是 **[EasyRefresh][]** 实现。详细使用可查看 **[Flutter-WanAndroid][]** 项目或者`EasyRefresh`项目首页介绍。
5.  加载中弹窗  
    由于每次默认返回`30`条数据，数据显示会有点延迟，导致页面出现空白。为了解决这个问题，我加入了`加载中...`弹窗。

弹窗使用的是封装之后的`showDialog`，由于`showDialog`中需要传递`context`，而我在`initState()`方法中是没法获取到`context`的，因此找到了 [实现全局存储context][context]的实现方式。

美滋滋的使用之后出现了下面的错误。

I/flutter (32591): 崩溃异常信息: setState() or markNeedsBuild() called during build.
    I/flutter (32591): This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets.  A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
    I/flutter (32591): The widget on which setState() or markNeedsBuild() was called was:
    I/flutter (32591):   Overlay-[LabeledGlobalKey<OverlayState>#42a79]
    I/flutter (32591): The widget which was currently being built when the offending call was made was:

具体原因看错误也没看懂，搜索一圈之后看到答案说只要给弹窗加个延迟即可。  
类似下面的代码：

Future.delayed(Duration(milliseconds: 200)).then((e) {
      DialogManager.showBasicDialog(NavigationService.mContext, "正在加载中...");
    });

以上就是整个示例的实现过程，具体代码可移步 **[Flutter-WanAndroid][]** 项目查看

[dio]: https://github.com/flutterchina/dio/blob/master/README-ZH.md
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/fbc78b7a6c154774a2bc4b4f3db8e228.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/36594d533b4b428e85c8fda0cfc2d2ab.png
[Flutter _Dio_Cookie]: https://blog.csdn.net/yechaoa/article/details/90234708
[Flutter Dio]: https://juejin.im/post/5e158957f265da5d637fff8c#heading-9
[Flutter-WanAndroid]: https://github.com/YGragon/Flutter-WanAndroid
[20200413004203568.gif]: /images/20230528/28f2b4c711744436abf1750203bd51dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230528/045b908a66284a34af403b5966b5ca97.png
[Android]: https://www.wanandroid.com/
[20200414184357952.gif]: /images/20230528/cbf1feb5b5f34c1fb349b25a9c0af9f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20230528/ee2b396ff7eb417e925ecf2037f4bfbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]: /images/20230528/4b2920cb48ba4602b576b8b5885ed2c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 5]: /images/20230528/05598134149e450a889fd885219ddac1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 6]: /images/20230528/716af888091e4050b2e4ec2dd85b8c03.png
[EasyRefresh]: https://pub.dev/packages/flutter_easyrefresh
[context]: https://juejin.im/post/5c9f2c37518825609415d11d#heading-7