dio+json_serializable从请求到网络解析

栏目: IOS · Android · 发布时间: 5年前

内容简介：网络请求到数据解析是一个app必不可少的流程之一，在flutter官网中目前主要是介绍 自带的Http请求+Json解析 但是也推荐了更好的网路请求到组合的方式 dio 和 json_serializable，本篇文章主要介绍这两个方式的使用，源码在结尾本文同步更新于我的gitpagepackage地址

网络请求到数据解析是一个app必不可少的流程之一，在flutter官网中目前主要是介绍 自带的Http请求+Json解析 但是也推荐了更好的网路请求到组合的方式 dio 和 json_serializable，本篇文章主要介绍这两个方式的使用，源码在结尾

本文同步更新于我的gitpage xsfelvis.github.io/2018/12/08/…

dio

简介

package地址 pub.flutter-io.cn/packages/di… ， 添加依赖

dependencies: dio: ^1.0.9 支持了 支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等 Performing a  GET request: 简单的使用如下 

Response response;
response=await dio.get("/test?id=12&name=wendu")
print(response.data.toString());
// Optionally the request above could also be done as
response=await dio.get("/test",data:{"id":12,"name":"wendu"})
print(response.data.toString());
复制代码

Performing a POST request: 

response=await dio.post("/test",data:{"id":12,"name":"wendu"})
复制代码

Performing multiple concurrent requests:

response= await Future.wait([dio.post("/info"),dio.get("/token")]);
复制代码

Downloading a file:

response=await dio.download("https://www.google.cn/","./xx.html")
复制代码

Sending FormData:

FormData formData = new FormData.from({
   "name": "wendux",
   "age": 25,
});
response = await dio.post("/info", data: formData)
复制代码

Uploading multiple files to server by FormData:

FormData formData = new FormData.from({
   "name": "wendux",
   "age": 25,
   "file1": new UploadFileInfo(new File("./upload.txt"), "upload1.txt"),
   // upload with bytes (List<int>) 
   "file2": new UploadFileInfo.fromBytes(utf8.encode("hello world"),"word.txt"),
   // Pass multiple files within an Array 
   "files": [
      new UploadFileInfo(new File("./example/upload.txt"), "upload.txt"),
      new UploadFileInfo(new File("./example/upload.txt"), "upload.txt")
    ]
});
response = await dio.post("/info", data: formData)
复制代码

更多可以参考作者的说明文章以及 example

并且由于原生的Http不支持charles抓包，这个库可以使用设置代理来达到抓包的目的，ip自己替换

dio.onHttpClientCreate = (HttpClient client) {
  client.findProxy = (uri) {
    //proxy all request to localhost:8888
    return "PROXY yourIP:yourPort";
  };
};
复制代码

这样就可抓包了。

网络请求封装使用

简单封装使我们更加容易的使用，核心代码如下

void _request(String url, Function callBack,
      {String method,
      Map<String, String> params,
      Function errorCallBack}) async {
//    dio.onHttpClientCreate = (HttpClient client) {
//      client.findProxy = (uri) {
//        //proxy all request to localhost:8888
//        return "PROXY 172.23.235.153:8888";
//      };
//    };
    String errorMsg = "";
    int statusCode;
    try {
      Response response;
      if (method == GET) {
        if (params != null && params.isNotEmpty) {
          StringBuffer sb = new StringBuffer("?");
          params.forEach((key, value) {
            sb.write("$key" + "=" + "$value" + "&");
          });
          String paramStr = sb.toString();
          paramStr = paramStr.substring(0, paramStr.length - 1);
          url += paramStr;
        }
        response = await dio.get(url);
      } else if (method == POST) {
        if (params != null && params.isNotEmpty) {
          response = await dio.post(url, data: params);
        } else {
          response = await dio.post(url);
        }
      }

      statusCode = response.statusCode;
      if (statusCode < 0) {
        errorMsg = "网络请求错误,状态码:" + statusCode.toString();
        _handError(errorCallBack, errorMsg);
        return;
      }
      if (callBack != null) {
        String res2Json  = json.encode(response.data);
        Map<String,dynamic> map=json.decode(res2Json);
        callBack(map["data"]);
      }
    } catch (exception) {
      _handError(errorCallBack, exception.toString());
    }
  }
复制代码

详细的可以参考源码 github.com/xsfelvis/le…

使用如下

HttpCore.instance.get(Api.HOME_BANNER, (data) {
  List<BannerData> banners = getBannersList(data);
  setState(() {
    slideData = banners;
  });
}, errorCallBack: (errorMsg) {
  print("error:" + errorMsg);
  return null;
});
复制代码

坑

在封装网络库的的时候发现 底层 response.data['data']时候当是一个 jsonarray 时候竟然无法直接取出'data',"Stirng not subType of Index "错误，原因是 此时拿到的不是一个json数据，没有双引号的假json数据，但是在jsonobject却可以，解决如下 

if (callBack != null) {
  String res2Json  = json.encode(response.data);
  Map<String,dynamic> map=json.decode(res2Json);
  callBack(map["data"]);
}
复制代码

json_serializable

简介

package地址 pub.flutter-io.cn/packages/js… 添加依赖

dependencies: json_serializable: ^2.0.0 dev_dependencies    build_runner: ^1.1.2    json_serializable: ^2.0.0

这个是个好东西，之前的相当于json数据一个个通过key解出来（关于自带的json解析可以参考 juejin.im/post/5b5d78… ），不仅耗时而且容易出错，json_serializable 让我们直接反序列化成对象直接使用类似于Gson，而且还提供了一个 工具 来自动帮助我们生成代码，简单快捷而且不容易出错

使用

以json

{
    "data":{
        "curPage":2,
        "datas":[
            {
                "apkLink":"",
                "author":"鸿洋",
                "chapterId":410,
                "chapterName":"玉刚说",
                "collect":false,
                "courseId":13,
                "desc":"",
                "envelopePic":"",
                "fresh":false,
                "id":7604,
                "link":"https://mp.weixin.qq.com/s/cCZKmqKrdCn63eWTbOuANw",
                "niceDate":"2018-12-03",
                "origin":"",
                "projectLink":"",
                "publishTime":1543830090000,
                "superChapterId":408,
                "superChapterName":"公众号",
                "tags":[
                    {
                        "name":"公众号",
                        "url":"/wxarticle/list/410/1"
                    }
                ],
                "title":"在 Retrofit 和 OkHttp 中使用网络缓存，提高访问效率",
                "type":0,
                "userId":-1,
                "visible":1,
                "zan":0
            },
            {
                "apkLink":"",
                "author":"鸿洋",
                "chapterId":408,
                "chapterName":"鸿洋",
                "collect":false,
                "courseId":13,
                "desc":"",
                "envelopePic":"",
                "fresh":false,
                "id":7605,
                "link":"https://mp.weixin.qq.com/s/r3AWeYafyMEc1-g8BWEHBg",
                "niceDate":"2018-12-03",
                "origin":"",
                "projectLink":"",
                "publishTime":1543766400000,
                "superChapterId":408,
                "superChapterName":"公众号",
                "tags":[
                    {
                        "name":"公众号",
                        "url":"/wxarticle/list/408/1"
                    }
                ],
                "title":"非 UI 线程能调用 View.invalidate()？",
                "type":0,
                "userId":-1,
                "visible":1,
                "zan":0
            }
        ],
        "offset":20,
        "over":false,
        "pageCount":289,
        "size":20,
        "total":5779
    },
    "errorCode":0,
    "errorMsg":""
}
复制代码

为例，我们首先找到实际数据信息，因为异errorcode 之类的处理已在上面的封装网络请求中处理了，这里需要关注 实际内容传递者 “data”里面的数据，将上面这个data里面的jsonObject，从data 这个key后面包括大括号一起复制到上面的代码生成工具网页里面，截图如下

dio+json_serializable从请求到网络解析

然后 当前项目的目录下运行 flutter packages pub run build_runner build

然就可以得到news.g.dart文件

然后在使用中通过获取对象属性的方式就可以直接拿到我们关注的字段了

//  获取News数据
void _getNewsList(int curpage) {
  var url = Api.HOME_ARTICLE + curpage.toString() + "/json";
  HttpCore.instance.get(url, (data) {
    News news = News.fromJson(data);
    List<Datas> newsDatas = news.datas;
    setState(() {
      listData = newsDatas;
    });
  });
}
复制代码

其他

自定义字段的处理

我们可以通过JsonKey自定义参数进行注释并自定义参数来自定义各个字段。例如:是否允许字段为空等。 注意，这里不加任何JsonKey默认允许空json字段。 比如解析字段有个横线， 而dart中只允许字母数字下划线作为变量名。所以我们必须对它进行特殊处理。@JsonKey(name="Nicehash-CNHeavy")来解析map，通常自动生成代码的工具已经可以帮助我们解决了 

@JsonKey(name: 'off-set')
int offset;
复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
锋利的jQuery

锋利的jQuery

单东林、张晓菲、魏然 / 人民邮电出版社 / 2009-6 / 39.00元

《锋利的jQuery》循序渐进地对jQuery的各种函数和方法调用进行了介绍，读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX以及插件方面等知识点，并结合每个章节后面的案例演示进行练习，达到掌握核心知识点的目的。为使读者更好地进行开发实践，《锋利的jQuery》的最后一章将前7章讲解的知识点和效果进行了整合，打造出一个非常有个性的网站，并从案例研究、网站材料、网站结构......一起来看看 《锋利的jQuery》 这本书的介绍吧!

码农工具
XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3