Flutter快学快用24讲--16 服务通信：Flutter 中常见的网络协议

上一课时之前，我们的接口都是在代码中模拟假数据，并没有从服务端获取数据，但是在实际开发中，必须与服务端进行交互。本课时主要介绍在 Flutter 中常见的网络传输协议序列化方式，并对其中比较常用的协议进行简单实践，最后再通过 JSON 协议来完善本课时的 api 部分的代码。

常见的 APP 网络传输协议序列化方式

常见的传输协议有三种：XML 、JSON 和 Protocol Buffer。我们先来对比下这三种协议，我会分别从 Flutter 中的实现、序列化后的数据长度、Flutter 中反序列化性能三个方面来讲解。我先将本课时中的一段基础的数据格式用来做效果演示，测试数据如下：

nickName = 'test-pb'; 
uid = '3001'; 
headerUrl = 'http://image.biaobaiju.com/uploads/20180211/00/1518279967-IAnVyPiRLK.jpg';

上面的是用户信息接口，接下来我们使用这三种方式来实现这个接口。

XML

XML 指可扩展标记语言（eXtensible Markup Language）是一种通用的重量级数据交换格式，以文本结构存储。

在 Flutter 中有一个解析 XML 的第三方库 xml2json，将服务端的 XML 解析为 JSON 格式，因为是第三方库，因此需要在 pubspec.yaml 中增加该库的依赖，然后更新本地库。接下来我们实现具体的代码，在 lib 目录下新建 api_xml ，然后在目录下创建 api_xml/user_info/index.dart 。创建完成后，我们来实现 user_info/index.dart 的逻辑。

首先需要增加第三方库的引用。

import 'dart:convert'; 
import 'package:two_you_friend/util/struct/user_info.dart'; 
import 'package:xml2json/xml2json.dart';

接下来实现 ApiXmlUserInfoIndex 类中的 getSelfUserInfo 方法，后续 getSelfUserInfo 会是一个异步网络请求方法，因此将返回类型修改为 Future <StructUserInfo>，具体实现逻辑如下：

<StructUserInfo></code>，具体实现逻辑如下：</p>
/// 获取自己的个人信息 
static Future<StructUserInfo> getSelfUserInfo() async{ 
  // 模拟xml假数据 
  final userInfoXml = '''<?xml version="1.0"?> 
  <userInfo> 
    <nickName>test</nickName> 
    <uid>3001</uid> 
    <headerUrl>http://image.biaobaiju.com/uploads/20180211/00/1518279967-IAnVyPiRLK.jpg</headerUrl> 
  </userInfo>'''; 

  // 记录当前时间 
  int currentTime = new DateTime.now().microsecondsSinceEpoch; 
  Xml2Json xml2json = Xml2Json(); 
  xml2json.parse(userInfoXml); 
  // 转化xml数据 
  final userInfoStr = xml2json.toGData(); 
  print('xml length'); 
  print(userInfoStr.length); 

  int jsonStartTime = new DateTime.now().microsecondsSinceEpoch; 
  final userInfo = json.decode(userInfoStr); 
  // 打印解析json时间 
  print('json decode time'); 
  print(new DateTime.now().microsecondsSinceEpoch - jsonStartTime); 

  // 打印整体解析时间 
  print('xml decode time'); 
  print(new DateTime.now().microsecondsSinceEpoch - currentTime); 
  return StructUserInfo( 
      userInfo['userInfo']['uid']['\$t'] as String, 
      userInfo['userInfo']['nickName']['\$t'] as String, 
      userInfo['userInfo']['headerUrl']['\$t'] as String 
  ); 
}

上述代码首先在第 4 行模拟一个 XML 数据，在第 12 行记录开始解析时间，第 28 行打印整体 XML 解析时间，在第 24 行打印 JSON 的解析时间。XML 的解析过程是先将 XML 转化为一个 JSON 字符串，然后再通过 convert 转化为 JSON。在 main.dart 中引入该文件，并调用 getSelfUserInfo 方法，可以看到如下的打印信息。

flutter: xml length 
flutter: 180 
flutter: json decode time 
flutter: 200 
flutter: xml decode time 
flutter: 2000

从解析过程来看，