Flutter网络请求与JSON解析

本文介绍如何在Flutter中创建HTTP网络请求和对请求的json string进行类型解析.

网络请求

官方使用的是用dart io中的HttpClient发起的请求，但HttpClient本身功能较弱，很多常用功能都不支持。

建议使用dio 来发起网络请求，它是一个强大易用的dart http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载……

dart:io

发起HTTP请求

http支持位于dart:io，所以要创建一个HTTP client，我们需要添加一个导入：

import 'dart:io';
var httpClient = new HttpClient();

该 client 支持常用的HTTP操作, such as GET, POST, PUT, DELETE.

处理异步

注意，HTTP API 在返回值中使用了Dart Futures。我们建议使用async/await语法来调用API。

网络调用通常遵循如下步骤：

创建 client.
构造 Uri.
发起请求, 等待请求，同时您也可以配置请求headers、 body。
关闭请求, 等待响应.
解码响应的内容.

Several of these steps use Future based APIs. Sample APIs calls for each step above are: 其中的几个步骤使用基于Future的API。上面步骤的示例：

get() async {
  var httpClient = new HttpClient();
  var uri = new Uri.http(
      'example.com', '/path1/path2', {'param1': '42', 'param2': 'foo'});
  var request = await httpClient.getUrl(uri);
  var response = await request.close();
  var responseBody = await response.transform(UTF8.decoder).join();
}

dio

添加依赖

dependencies:
  dio: ^x.x.x  // latest version

发起一个 GET 请求 :

Response response;
response=await dio.get("/test?id=12&name=wendu")
print(response.data.toString());
// 请求参数也可以通过对象传递，上面的代码等同于：
response=await dio.get("/test",data:{"id":12,"name":"wendu"})
print(response.data.toString());

发起一个 POST 请求:

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

发起多个并发请求:

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

下载文件:

response=await dio.download("https://www.google.com/","./xx.html")

发送 FormData:

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

通过FormData上传多个文件:

FormData formData = new FormData.from({
   "name": "wendux",
   "age": 25,
   "file1": new UploadFileInfo(new File("./upload.txt"), "upload1.txt")
   "file2": new UploadFileInfo(new File("./upload.txt"), "upload2.txt")
});
response = await dio.post("/info", data: formData)

JSON解析

使用 dart:convert手动序列化JSON

Flutter中基本的JSON序列化非常简单。Flutter有一个内置dart:convert库，其中包含一个简单的JSON编码器和解码器。

以下是一个简单的user model的示例JSON。

{
  "name": "John Smith",
  "email": "john@example.com"
}

有了dart:convert，我们可以用两种方式来序列化这个JSON model。我们来看看这两种方法：

内连序列化JSON

通过查看dart：转换JSON文档，我们发现可以通过调用JSON.decode方法来解码JSON ，使用JSON字符串作为参数。

Map<String, dynamic> user = JSON.decode(json);
print('Howdy, ${user['name']}!');
print('We sent the verification link to ${user['email']}.');

不幸的是，JSON.decode()仅返回一个Map<String, dynamic>，这意味着我们直到运行时才知道值的类型。通过这种方法，我们失去了大部分静态类型语言特性：类型安全、自动补全和最重要的编译时异常。这样一来，我们的代码可能会变得非常容易出错。

例如，当我们访问name或email字段时，我们输入的很快，导致字段名打错了。但由于这个JSON在map结构中，所以编译器不知道这个错误的字段名(译者语：所以编译时不会报错)。

在模型类中序列化JSON

我们可以通过引入一个简单的模型类(model class)来解决前面提到的问题，我们称之为User。在User类内部，我们有：

一个User.fromJson 构造函数, 用于从一个map构造出一个 User实例 map structure
一个toJson 方法, 将 User 实例转化为一个map.

这样，调用代码现在可以具有类型安全、自动补全字段（name和email）以及编译时异常。如果我们将拼写错误或字段视为int类型而不是String，那么我们的应用程序就不会通过编译，而不是在运行时崩溃。

user.dart

class User {
  final String name;
  final String email;
  User(this.name, this.email);
  User.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        email = json['email'];
  Map<String, dynamic> toJson() =>
    {
      'name': name,
      'email': email,
    };
}

现在，序列化逻辑移到了模型本身内部。采用这种新方法，我们可以非常容易地反序列化user。

Map userMap = JSON.decode(json);
var user = new User.fromJson(userMap);
print('Howdy, ${user.name}!');
print('We sent the verification link to ${user.email}.');

要序列化一个user，我们只是将该User对象传递给该JSON.encode方法。我们不需要手动调用toJson这个方法，因为JSON.encode已经为我们做了。

String json = JSON.encode(user);

Json映射到对象

首先要借助一个工具jsonformat 工具下载地址

举一个例子 json文件,来自玩安卓网站

这是一个相对很复杂的json文件

用jsonview打开查看,这个json文件包含一个data的数组和两个变量,然后数组的每一项又包含一个数组和6个变量,然后下一级数组的每一项又包含一个数组和6个变量

下面使用jsonformat 转换成dart bean文件

打开下载的jsonformat ,将json文件copy进去点击格式化

右边的红色是我们要填写的类名称,对应关系像这样,这里分别填写 tree children children ,后两个相同,点击生成bean

生成代码如下

import 'dart:convert' show json;
class tree {
  int errorCode;
  String errorMsg;
  List<children> data;
  tree(jsonStr) {
  var jsonRes = json.decode(jsonStr);
    errorCode = jsonRes['errorCode'];
    errorMsg = jsonRes['errorMsg'];
    data = [];
for (var dataItem in jsonRes['data']){
    data.add(new children(dataItem));
}
  }
  @override
  String toString() {
    return '{"errorCode": $errorCode,"errorMsg": ${errorMsg != null?'${json.encode(errorMsg)}':'null'},"data": $data}';
  }
}
class children {
  int courseId;
  int id;
  int order;
  int parentChapterId;
  int visible;
  String name;
  List<children> children;
  children(jsonRes) {
    courseId = jsonRes['courseId'];
    id = jsonRes['id'];
    order = jsonRes['order'];
    parentChapterId = jsonRes['parentChapterId'];
    visible = jsonRes['visible'];
    name = jsonRes['name'];
    children = [];
for (var childrenItem in jsonRes['children']){
    children.add(new children(childrenItem));
}
  }
  @override
  String toString() {
    return '{"courseId": $courseId,"id": $id,"order": $order,"parentChapterId": $parentChapterId,"visible": $visible,"name": ${name != null?'${json.encode(name)}':'null'},"children": $children}';
  }
}
class children {
  int courseId;
  int id;
  int order;
  int parentChapterId;
  int visible;
  String name;
  List<dynamic> children;
  children(jsonRes) {
    courseId = jsonRes['courseId'];
    id = jsonRes['id'];
    order = jsonRes['order'];
    parentChapterId = jsonRes['parentChapterId'];
    visible = jsonRes['visible'];
    name = jsonRes['name'];
    children = [];
for (var childrenItem in jsonRes['children']){
    children.add(childrenItem);
}
  }
  @override
  String toString() {
    return '{"courseId": $courseId,"id": $id,"order": $order,"parentChapterId": $parentChapterId,"visible": $visible,"name": ${name != null?'${json.encode(name)}':'null'},"children": $children}';
  }
}

接下来就是在APP中请求网络,将其转换成dart bean

    ///封装的get请求 _networkUtil,可以替换成自己的请求方式
  ///发起get网络请求并且转换json
  Future<dynamic> requestGet(String url) {
    return http.get(url)
        .then((http.Response response) {
        final String res = response.body;
        final int statusCode = response.statusCode;
        if (statusCode < 200 || statusCode > 400 || json == null) {
          throw new Exception("Error while fetching data");
        }
        ///有值
        return _decoder.convert(res);
    });
  }
 ///这里返回的就是 Future<Tree> 对象,(fillUrl(TREE_LIST)是请求的url
  Future<Tree> fetchTree() {
    return _networkUtil.requestGet(fillUrl(TREE_LIST)).then((dynamic res) {
      ///可以这样取值
      return new Tree.map(res);
    });
  }