Flutter | 定义一个通用的多功能网络请求 Widget

首先道个歉，最近公司很忙，又赶上十一假期，所以鸽了将近半个月。

不过，后续还是会每周最少更新两篇的！

那说起网络请求的控件，我们首先是不是会想起 FutureBuilder？

FutureBuilder 给我们封装好了网络请求中的各种状态。

如果没有了解过，那么可以看我这篇文章：Flutter - FutureBuilder 异步UI神器。

这篇文章是早期写的，有些地方写的有些问题，但不重要！主要了解一下 FutureBuilder 的状态就可以了。

本篇文章中只是提供一种思路，欢迎一起探讨，也欢迎不吝赐教！

效果如下。

首先是没有开启服务的情况：

可以看到全部都是错误的信息，

然后开启服务：

1. 先定义一个通用的网络请求

那既然是网络请求，那首先我们要定义一个通用的网络请求方法。

每一家后台 API 的风格都不一样，有的是 RSETful，有的是我们最熟悉的 GET、POST。

这里就以 GET 为例，API 接口为 GitHub - 网易云音乐 Node.js API service。 ^[1]

网络请求使用的是 Dio，先创建一个 NetUtils.dart。

初始化代码：

static Dio _dio;
static void init() async {
      Directory tempDir = await getTemporaryDirectory();  String tempPath = tempDir.path;  CookieJar cj = PersistCookieJar(dir: tempPath);  _dio = Dio(BaseOptions(baseUrl: 'http://127.0.0.1:3000'))    ..interceptors.add(CookieManager(cj))    ..interceptors.add(LogInterceptor(responseBody: true, requestBody: true));}

在 runApp 前面调用即完成初始化。