每日一言:人生或如一輪紅日，劃破黎明的沉寂，熾熱的夢想在噴勃或如一段段插曲在生命的華章里熠熠激蕩迸濺起最璀璨的激昂。
原文鏈接:http://liuwangshu.cn/flutter/primer/11-dio-json.html
前言
在Android開發中如果我們想要請求網絡，可以使用HttpClent、HttpURLConnection，但在項目中一般都會使用OkHttp和Retrofit。在Flutter也是如此，系統提供了HttpClient，但在項目中一般會使用第三方庫，比如http和Dio，如果你想找到更多的第三庫，可以在pub.dartlang.org/ 上查找想要的庫。本篇文章以Dio為例，另外還會介紹JSON數據解析方面的知識。
1.Dio的使用入門
Dio是一個強大的Dart Http請求庫，支持攔截器，全局配置，FormData，請求取消，文件下載，超時等。
添加依賴
在pubspec.yaml中添加依賴。
dependencies:
dio: 2.1.7
官網給出了一個簡單的例子：
import 'package:dio/dio.dart';
void getHttp() async {
try {
Response response = await Dio().get("http://liuwangshu.com");
print(response);
} catch (e) {
print(e);
}
}
如果想要發送一個GET請求:
Response response;
response=await dio.get("/test?id=3&name=liuwangshu")
print(response.data.toString());
// 請求參數也可以通過對象傳遞，上面的代碼等同于：
response=await dio.get("/test",data:{"id":3,"name":"liuwangshu"})
print(response.data.toString());
發送一個POST 請求:
response=await dio.post("/test",data:{"id":3,"name":"liuwangshu"})
發送一個FormData：
FormData formData = new FormData.from({
"name": "liuwangshu",
"age": 18,
});
response = await dio.post("/info", data: formData);
還有很多示例在github上，地址為：https://github.com/flutterchina/dio。本文的目的不是重復介紹這些示例，而是寫一個網絡訪問的例子帶大家快速入門。
2.Dio訪問網絡的例子
import 'dart:convert';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _ipAddress = 'Unknown';
_getIPAddress() async {//1
var url = 'https://httpbin.org/ip';
Dio _dio = Dio();
String result;
try {
var response = await _dio.get(url);//2
if (response.statusCode == HttpStatus.ok) {
var data= jsonDecode(response.toString());//3
result = data['origin'];
} else {
result =
'Error getting IP status ${response.statusCode}';
}
} catch (exception) {
result =exception.toString();
}
if (!mounted) return;
setState(() {
_ipAddress = result;//4
});
}
@override
Widget build(BuildContext context) {
var spacer = SizedBox(height: 10.0);
return Scaffold(
body: Padding(
padding: EdgeInsets.all(100.0),
child: Column(
children: <Widget>[
Text('IP地址為：'),
spacer,
Text('$_ipAddress'),
spacer,
RaisedButton(
onPressed: _getIPAddress,
child: Text('請求網絡'),
),
],
),
),
);
}
}
async和await是Dart語言用來支持異步編程的關鍵字，注釋1處的async關鍵字使得_getIPAddress方法變為了異步方法，注釋2處的await關鍵字只能在異步方法中使用，它使得注釋2處后面的代碼等到get請求返回后再執行。
如果網絡請求返回的狀態碼為200，就在注釋3處進行Json解析，將結果賦值給result變量。
當我們點擊界面上按鈕時，會調用_getIPAddress方法，在注釋4處將請求的結果賦值給_ipAddress并顯示在Text中。
網絡請求成功后，效果如下圖。
3.JSON數據解析
常用的JSON數據解析方式主要有三種，這里分別介紹下。
3.1 使用json.decode()方法
第2小節的例子用到的就是json.decode()方法，需要引入dart:convert庫。json.decode() 方法會將 String類型數據解析成Map數據結構：Map<String, dynamic>, 取數據的格式為object[key]。
上面例子中返回的JOSN數據為：
{
"origin": "111.193.7.70, 111.193.7.70"
}
對于不復雜的JOSN數據使用json.decode()方法是一個不錯的選擇，但實際項目中的JOSN數據會復雜一些，如果每次取數據都用object[key]，那么很容易出錯。
3.2手動編寫實體類
用一個model來保存數據，使得數據序列化。
我們可以新建一個ip.dart：
class Ip {
String origin;
Ip(this.origin);
Ip.fromJson(Map<String, dynamic> json) : origin = json['origin'];
Map<String, dynamic> toJson() => {
"origin": origin,
};
}
然后修改main.dart:
import 'dart:convert';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'model/ip.dart';
...
class _MyHomePageState extends State<MyHomePage> {
var _ipAddress = 'Unknown';
_getIPAddress() async {
var url = 'https://httpbin.org/ip';
Dio _dio = Dio();
String result;
try {
var response = await _dio.get(url);
if (response.statusCode == HttpStatus.ok) {
var data= jsonDecode(response.toString());
var ip=Ip.fromJson(data);//1
result = ip.origin;
}
...
}
...
}
注釋1處通過Ip.fromJson就可以獲取ip的實體，這樣就可以完成賦值等操作了。
3.3 自動生成實體類
一般項目中Json數據會比較繁多，每次重復寫實體類的模版代碼顯然枯燥無意義，可以使用一些工具來生成實體類。
比如使用網頁自動生成： https://app.quicktype.io/ 。轉換的實體類如下所示。
import 'dart:convert';
Ip ipFromJson(String str) => Ip.fromJson(json.decode(str));
String ipToJson(Ip data) => json.encode(data.toJson());
class Ip {
String origin;
Ip({
this.origin,
});
factory Ip.fromJson(Map<String, dynamic> json) => new Ip(
origin: json["origin"],
);
Map<String, dynamic> toJson() => {
"origin": origin,
};
}
除了使用網頁生成，還可以使用開源的JSONFormat4Flutter：
https://github.com/debuggerx01/JSONFormat4Flutter
使用json_serializable
除了以上提到的工具，還可以使用json_serializable。
json_serializable是一個自動化的源代碼生成器，可以方便的生成JSON實體類。
首先在pubspec.yaml加入如下依賴，
dependencies:
json_annotation: ^2.4.0
dev_dependencies:
build_runner: ^1.0.0
json_serializable: ^3.0.0
在AS的Terminal中運行flutter packages get命令，用來在項目中使用這些新的依賴項。
接著實現ip實體類。
import 'package:json_annotation/json_annotation.dart';
// ip.g.dart 將在我們運行生成命令后自動生成
part 'ip.g.dart';
//告訴生成器，這個類需要生成Model類
@JsonSerializable()
class Ip{
Ip(this.origin);
String origin;
factory Ip.fromJson(Map<String, dynamic> json) => _$IpFromJson(json);
Map<String, dynamic> toJson() => _$IpToJson(this);
}
關鍵的在于@JsonSerializable()，它用于告訴生成器，Ip類是需要生成的Model類。在Terminal窗口運行如下命令生成ip.g.dart文件。
flutter packages pub run build_runner build
如何使用見3.2節就可以了，使用json_serializable可以讓我們忽略Ip類中的任何手動JSON序列化 。源代碼生成器會在同一個目錄下生成Ip.g.dart，如下所示。
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'ip.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
Ip _$IpFromJson(Map<String, dynamic> json) {
return Ip(json['origin'] as String);
}
Map<String, dynamic> _$IpToJson(Ip instance) =>
<String, dynamic>{'origin': instance.origin};
該文件有著必需的序列化邏輯，目前Flutter官方推薦的就是使用json_serializable。
