Flutter开发对于Http对于网络请求的封装及Json数据处理
logo.jpeg
前言
自谷歌在2018大会公布Beta1也有了一段时间，这段时间以来flutter也越来越热。这段时间我也对Flutter进行了一些学习，今天准备把一些学的内容进行整理，一是为了梳理下学习的一些知识节点，二是通过一些封装整理，方便后期如过需要使用flutter开发可以快速搭建基础组件进行开发。
目录结构
15585042055957.jpg
对于项目，我做了如上一些目录区分：
dao：主要做一些接口调用及逻辑处理。
exts：做一些扩展累比如callback等。
http：对网络请求dio的再次封装。
json：对数据json解析接口定义。
model：对bean类的定义。
viewmodel：对页面数据集合类。
这篇文章中，主要是对http和json解析两块的封装使用。
HTTP
Dio
dio作为一个强大的Drat Http开源请求库，我们已经可以很方便的使用它进行一些网络请求，但我对它进行了二次封装，主要是一些配置的统一设置和一些逻辑的统一处理。
15585068875920.jpg
我们先来看DioUtil类，这里我采用单例模式来创建dio对象，并默认设置了baseurl，也可以在项目启动使用通过init()方法设置Options来初始化配置。
http
15585079511513.jpg
在HttpUtil中最主要是对dio的request()方法进行封装，提供了统一的配置和处理。
其中：
//可以通过mheaders配置公共head
mheaders = new Map<String, dynamic>();
if (handers != null) {
mheaders.addAll(handers);
}
options.headers = mheaders;
可以通过mheaders配置统一的head及组合由方法传入的handers组成最终的请求head。
static String errorNet = "{\"code\":19,\"msg\":\"网络错误，请检查网络情况\"}";
ConnectUtil.isConnect((val) async {
if (val) {
...
} else {
callback(19, errorNet);
}
}
在真正请求开始前通过ConnectUtil做网络情况判断，因为异步，所以通过回调方式处理并做预定格式返回错误。（网络情况判断通过第三方connectivity框架实现）
static String errorMsg = "{\"code\":0,\"msg\":\"数据访问错误，请检查\"}";
final code = response.statusCode;
final strJson = response.data.toString();
LogUtil.d("HttpUtil", "code:" + code.toString() + " outdata:" + data);
if (strJson != null && strJson != "") {
if (code != 200) {
callback(0, errorMsg);
} else {
callback(code, strJson);
}
} else {
callback(0, errorMsg);
}
请求返回后，如果请求错误，也同样做了统一的错误格式返回，同时也可以在这里做统一的错误逻辑处理。
15585091230552.jpg
同时HttpUtil提供get和post两个简单的api进行及少量入参即可进行网络请求。
JSON
因为Flutter中是禁止反射的，所为我们也就不能使用GSON / Jackson之类的进行序列化和反序列化。然而我们现在很多时间接口请求都是以json格式进行返回的。那么又怎么样实现从json到model到转换呢。
在项目中我通过我通过dart:convert中内置的JSON解码器，它将原始JSON字符串传递给JSON.decode() 方法，然后在返回的Map<String, dynamic>中查找所需的值，通过手动的方式进行实现。
15585105639025.jpg
首先通过JsonModel设置抽象方法bind(),然后让所有model类都继承JsonModel类并实现bind()方法，并且bing方法的参数为Map类型，所以每个model方法只需先实现中通过map获取所需的属性值即可。如下面UserModel类所示。
15585107540593.jpg
那我们又在什么时候吧json转换成map的呢？入下图，我创建了JsonViewModel类来进行此项操作。
15585110228177.jpg
15585115237214.jpg
在JsonViewModel中通过fromJson()方法传入json字符串，然后通过json.decode(data)方法解析成map。
因为JsonViewModel也同样继承了JsonModel。所以我们可以bind(jMap["data"]);的形式调研bind方法并传入对于数据，并且在JsonViewModel的子类中做具体处理。
要注意的是，我们预先把返回的json格式定义成了code，msg，data的形式，如果预定义的返回格式有修改可以在这边进行调整。
15585116032962.jpg
至此，我们只需要在请求返回时候实例化对应的viewmodel类，并调用fromJson()方法就可以得到对于的数据实体了。
GitHub
要看源码点这里
网友评论