本文首發於公衆號「劉望舒」
ReactNative入門系列
React Native組件
Flutter基礎系列
前言
在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。
Flutter基礎系列
Flutter基礎(一)移動開發的跨平臺技術演進
Flutter基礎(二)Flutter開發環境搭建和Hello World
Flutter基礎(三)Dart快速入門
Flutter基礎(四)開發Flutter應用前需要掌握的Basic Widget
Flutter基礎(五)Material組件之MaterialApp、Scaffold、AppBar
Flutter基礎(六)Material組件之BottomNavigationBar、TabBar、Drawer
Flutter基礎(七)Scrolling Widget之ListView、GridView、PageView
Flutter基礎(八)手勢相關Widget:GestureDetector和Dismissible
Flutter基礎(九)資源和圖片
Flutter基礎(十)佈局Widget快速入門
Flutter基礎(十一)網絡請求(Dio)與JSON數據解析
Flutter基礎(十二)路由(頁面跳轉)與數據傳遞
Flutter基礎(十三)Flutter與Android的相互通信