Flutter学习整理（一）

優僽
377 阅读4分钟

####Flutter开发对于Http对于网络请求的封装及Json数据处理

logo.jpeg

##目录 Flutter学习整理（二）

##前言 #####    自谷歌在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 要看源码点这里

####大家要是看了觉得还可以，点个赞给个支持呀！

avatar
文章
阅读
粉丝