前言
dio是一個(gè)強(qiáng)大的Dart Http請(qǐng)求庫驮吱，支持Restful API、FormData萧吠、攔截器左冬、請(qǐng)求取消、Cookie管理纸型、文件上傳/下載拇砰、超時(shí)梅忌、自定義適配器等...
dio是flutterchina的所以有很完整的中文文檔，具體的api不多講除破，我們這里只是提一下怎么封裝牧氮。中文文檔可以點(diǎn)擊鏈接查看。https://github.com/flutterchina/dio/blob/master/README-ZH.md
為啥封裝
- 統(tǒng)一處理請(qǐng)求域名皂岔；
- 統(tǒng)一打印請(qǐng)求信息蹋笼；
- 統(tǒng)一打印響應(yīng)信息；
- 統(tǒng)一打印報(bào)錯(cuò)信息躁垛；
- 返回?cái)?shù)據(jù)自動(dòng)轉(zhuǎn) json 格式剖毯；
- ...
dio
1、添加 dio 依賴
編輯 項(xiàng)目根目錄/pubspec.yaml教馆，找到 dependecies 屬性逊谋，添加 dio 依賴。
dependencies:
flutter:
sdk: flutter
dio: "^2.1.13"
2土铺、封裝HttpUtils
import 'package:dio/dio.dart';
import 'package:gank_flutter/utils/LogUtils.dart';
class HttpUtils {
static const BASE_URL = "http://gank.io/api";
static const CONNECT_TIMEOUT = 5000;
static const RECEIVE_TIMEOUT = 3000;
static Dio dio;
/// 生成Dio實(shí)例
static Dio getInstance() {
if (dio == null) {
//通過傳遞一個(gè) `BaseOptions`來創(chuàng)建dio實(shí)例
var options = BaseOptions(
baseUrl: BASE_URL,
connectTimeout: CONNECT_TIMEOUT,
receiveTimeout: RECEIVE_TIMEOUT);
dio = new Dio(options);
}
return dio;
}
/// 請(qǐng)求api
static Future<Map> request(String url, {data, method}) async {
data = data ?? {};
method = method ?? "get";
// 由于我示例的接口是 http://gank.io/api/data/福利/10/1
// 所以使用下面這張方式拼接get參數(shù)
// 如上面則為 http://gank.io/api/data/:category/:pageSize/:page
data.forEach((key, value) {
if (url.indexOf(key) != -1) {
url = url.replaceAll(':$key', value.toString());
}
});
// 打印請(qǐng)求相關(guān)信息：請(qǐng)求地址胶滋、請(qǐng)求方式、請(qǐng)求參數(shù)
LogUtils.log("請(qǐng)求地址：【$method $url】");
LogUtils.log("請(qǐng)求參數(shù)：【$data】");
var dio = getInstance();
var res;
if (method == "get") {
// get
var response = await dio.get(url);
res = response.data;
} else {
// post
var response = await dio.post(url, data: data);
res = response.data;
}
return res;
}
/// get
static Future<Map> get(url, data) => request(url, data: data);
/// post
static Future<Map> post(url, data) =>
request(url, data: data, method: "post");
}
3悲敷、使用
get方式如果是拼接path則如下究恤，如果是get的query則無需:size這種，如果是post方式也是直接傳遞參數(shù)即可后德。
void _initData() async {
var map = Map();
map["size"] = 10;
map["page"] = 1;
var res = await HttpUtils.get("/data/福利/:size/:page",map);
LogUtils.log(res["result"]);
setState(() {
_imageList=res["result"];
});
}
JSON解析
現(xiàn)在我們得到的是一個(gè)Map<String, dynamic>對(duì)象部宿，可以通過res["result"]的形式得到值，但是我們一般在JSON不復(fù)雜或者層級(jí)不深的時(shí)候可以使用這種方式獲取值瓢湃，但是當(dāng)JSON很復(fù)雜的時(shí)候我們這樣獲取可能就難免出錯(cuò)理张。此時(shí)我們可以使用FlutterJsonBeanFactory將Map解析為對(duì)象，我們就可以使用如MeiZiEntity.fromJson(res).results的形式獲取值了绵患。
1雾叭、搜索并安裝FlutterJsonBeanFactory
AndroidStudio 3.5 RC3
加載不出來的話去這里https://plugins.jetbrains.com/plugin/11415-flutterjsonbeanfactory/
2、重啟后使用
重啟之后在new 的時(shí)候就會(huì)多一個(gè) dart bean class File from Json 的選項(xiàng)
3落蝙、生成dart類
點(diǎn)擊make后生成mei_zi_entity.dart其中fromJson和toJson就是解析的關(guān)鍵织狐，實(shí)際上就是自動(dòng)把Map中的數(shù)據(jù)取出來拼接成對(duì)象。
class MeiZiEntity {
bool error;
List<MeiZiResult> results;
MeiZiEntity({this.error, this.results});
MeiZiEntity.fromJson(Map<String, dynamic> json) {
error = json['error'];
if (json['results'] != null) {
results = new List<MeiZiResult>();
(json['results'] as List).forEach((v) {
results.add(new MeiZiResult.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['error'] = this.error;
if (this.results != null) {
data['results'] = this.results.map((v) => v.toJson()).toList();
}
return data;
}
}
4筏勒、json數(shù)據(jù)轉(zhuǎn)對(duì)象
結(jié)合上面我們的dio請(qǐng)求赚瘦，這里我們拿到數(shù)據(jù)的時(shí)候就可以如下方式進(jìn)行解析并使用了。
void _initData() async {
var map = Map();
map["size"] = 10;
map["page"] = 1;
var res = await HttpUtils.get("/data/福利/:size/:page",map);
setState(() {
_imageList=MeiZiEntity.fromJson(res).results;
});
}
泛型問題
在我們使用的測(cè)試Api中基本數(shù)據(jù)類型大概有如下兩種方式奏寨，一種result為對(duì)象，一種result為數(shù)組鹰服。
如下這兩種病瞳，
{
"error": false,
"results": [
{
"_id": "5ccdbc219d212239df927a93"
}
]
}
{
"error": false,
"results":{
"_id": "5ccdbc219d212239df927a93"
}
}
此時(shí)如果我們要使用統(tǒng)一的BaseBean去解析就存在泛型問題揽咕，由于list獲取不到list的item的泛型,所以不可以傳入list<A>這樣的泛型。所以這里我們就不在底層去處理套菜，List的泛型問題亲善，而是在BaseBean用其他方式去繞過這個(gè)問題。（ps：我這個(gè)方法肯定不是很好逗柴，這里我們只是為了引出EntityFactory的使用蛹头，其他情況可根據(jù)自己的需求去封裝。）
1戏溺、EntityFactory
使用FlutterJsonBeanFactory后在lib根目錄下會(huì)生成entity_factory.dart文件
import 'package:gank_flutter/model/category_entity.dart';
import 'package:gank_flutter/model/mei_zi_entity.dart';
class EntityFactory {
static T generateOBJ<T>(json) {
if (1 == 0) {
return null;
} else if (T.toString() == "CategoryEntity") {
return CategoryEntity.fromJson(json) as T;
} else if (T.toString() == "MeiZiEntity") {
return MeiZiEntity.fromJson(json) as T;
} else {
return null;
}
}
}
實(shí)際上他是根據(jù)這個(gè)規(guī)則生成的代碼
同時(shí)如果手動(dòng)更改過或者是手動(dòng)生成的bean可以點(diǎn)擊如圖所示自動(dòng)更新和生成代碼（ps：前提是滿足上面的規(guī)則）
2渣蜗、使用EntityFactory
我的做法就是把對(duì)象的results和數(shù)組的results分開解析。具體見下面的BaseBean
import 'package:gank_flutter/entity_factory.dart';
/// 解析基類
class BaseBeanEntity<T> {
bool error;
Map<String, dynamic> results;
List<dynamic> resultsList;
BaseBeanEntity({this.error, this.results, this.resultsList});
/// 處理results為對(duì)象的情況
BaseBeanEntity.fromJson(Map<String, dynamic> json) {
error = json['error'];
results = json['results'];
}
/// 處理results為數(shù)組的情況
BaseBeanEntity.fromJsonList(Map<String, dynamic> json) {
error = json['error'];
resultsList = json['results'];
}
/// 獲取results對(duì)象
T getObject<T>() {
return EntityFactory.generateOBJ<T>(results); //使用EntityFactory解析對(duì)象
}
/// 獲取results數(shù)組
List<T> getList<T>() {
var list = new List<T>();
if (resultsList != null) {
resultsList.forEach((v) { //拼裝List
list.add(EntityFactory.generateOBJ<T>(v));//使用EntityFactory解析對(duì)象
});
}
return list;
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['error'] = this.error;
if (this.results != null) {
data['results'] = this.results;
}
return data;
}
}
3旷祸、BaseBean的使用
結(jié)合dio網(wǎng)絡(luò)請(qǐng)求使用BaseBean耕拷，這樣可以相對(duì)簡(jiǎn)化了Json解析為bean的過程。
void _initData() async {
var map = Map();
map["size"] = 10;
map["page"] = 1;
var res = await HttpUtils.get("/data/福利/:size/:page", map);
setState(() {
_imageList = BaseBeanEntity.fromJsonList(res).getList<MeiZiEntity>(); //results為數(shù)組
_imageObj = BaseBeanEntity.fromJson(res).getObject<MeiZiEntity>(); //results為對(duì)象
});
}
MeiZiEntity item = _imageList[index];
String imageUrl = item.url;
