在 Flutter 中，要說網(wǎng)絡(luò)請求插件，不得不提 dio，而且這是國人開發(fā)的開源插件，在 pub 上好評率達到99%，GitHub 也收獲了近萬star。借用官方文檔的一句話描述：dio是一個強大的Dart Http請求庫，支持Restful API、FormData、攔截器、請求取消、Cookie管理、文件上傳/下載、超時、自定義適配器等...可以說是覆蓋了所有涉及到的網(wǎng)絡(luò)請求。
前期準備
要開始網(wǎng)絡(luò)請求部分了，驗證接口請求是個麻煩事， 單純的測試 CRUD 請求倒還好，可以使用 JsonPlaceholder這樣的工具來完成（國內(nèi)訪問有點慢）。如果要弄一個完整的 App，則需要有后端搭配，要是不懂后端就麻煩了，只能實用 Mock 工具了。
作為要成為全棧的同學(xué)來說，怎么能Mock 就算了呢，不會寫，咱還不會淘??！GitHub 走一圈，找到了一個基于 Express.js 框架的 api 源碼，是一個老外寫的，看了看，發(fā)現(xiàn)也不太難懂， 生搬硬套改唄！
后臺源碼我已經(jīng)上傳了，大家可以自行看，如果不想看的，直接按文檔配置好環(huán)境， 在目錄下執(zhí)行一下命令 node index.js就可以啟動本地服務(wù)，監(jiān)聽的 api 地址在：http://localhost:3900/api/。想自己改的，需要具備以下知識（努力學(xué)吧，少年?。?/p>
- MongoDB：后臺數(shù)據(jù)庫使用的是 MongoDB，采用
mongoose實現(xiàn)的 MongoDB 訪問，基本的 MongoDB 操作要會。 - Javascript：JS 不會，肯定玩不轉(zhuǎn)，不過Dart 和 JS 很像，學(xué)起來不會怎么費勁。
你好，dio
dio 這個名字就很中國化（按拼音讀你就懂了，也可能是我想歪了，原意可能是 Dart IO 的縮寫吧）。dio目前最新的版本已經(jīng)是4.0.4了。先來看基本的 get，post，put，patch，delete 請求的寫法。
get請求
Response response;
var dio = Dio();
response = await dio.get('/test?id=12&name=wendu');
print(response.data.toString());
// 也可以實用 query 參數(shù)的方式請求
response = await dio.get('/test', queryParameters: {'id': 12, 'name': 'wendu'});
print(response.data.toString());
post 請求
response = await dio.post('/test', data: {'id': 12, 'name': 'wendu'});
patch、put 請求
var result = await Dio().patch('/test/12', data: data);
var result = await Dio().put('/test/12', data: data);
delete請求
var result = await Dio().delete('/test/12');
使用起來也比較簡單，返回的 result 會包括的 http 請求的狀態(tài)碼，信息，header 和響應(yīng)數(shù)據(jù)，其中響應(yīng)數(shù)據(jù)在 data 屬性里面。
小試牛刀
之前介紹了來一個圖文并茂的列表，之前的數(shù)據(jù)是我們的 Mock 數(shù)據(jù)，現(xiàn)在修改成從網(wǎng)絡(luò)上獲取，接口已經(jīng)準備好了，為：http://localhost:3900/api/dynamics，支持傳入分頁參數(shù)進行分頁。為了簡單起見，只返回了分頁數(shù)據(jù)，沒有返回分頁信息。
注：可以在后臺工程目錄下運行 node seed.js 生成數(shù)據(jù)庫數(shù)據(jù)。
在 pubspec.yaml 中加入 dio 的依賴：
dio: ^4.0.0
實體類準備
為了避免實用 Map 的key 下標(biāo)訪問，我們準備一個實體類 DynamicEntity，將 Map 數(shù)據(jù)轉(zhuǎn)換為實體對象。
class DynamicEntity {
String _title;
String _imageUrl;
int _viewCount;
String _id;
get title => _title;
get imageUrl => _imageUrl;
get viewCount => _viewCount;
get id => _id;
static DynamicEntity fromJson(Map<String, dynamic> json) {
DynamicEntity newEntity = DynamicEntity();
newEntity._id = json['_id'];
newEntity._title = json['title'];
newEntity._imageUrl = json['imageUrl'];
newEntity._viewCount = json['viewCount'];
return newEntity;
}
}
接口請求類
新建一個接口請求類DynamicService，將動態(tài)涉及到的網(wǎng)絡(luò)請求統(tǒng)一放入該類調(diào)用，里面的方法均定義為靜態(tài)方法，避免需要實例化對象來請求，目前我們只驗證列表接口，這里也沒有做錯誤和異常處理。
import 'package:dio/dio.dart';
class DynamicService {
static String host = 'http://localhost:3900/api/';
static Future list(page, pageSize) async {
var result = await Dio().get(
host + 'dynamics',
queryParameters: {'page': page, 'pageSize': pageSize},
);
return result;
}
}
修改原有 Mock 數(shù)據(jù)為網(wǎng)絡(luò)請求
我們之前的Mock 數(shù)據(jù)就是仿照 API 接口做的，因此換起來很方便，可以對比一下代碼：
//使用Mock數(shù)據(jù)
void _requestNewItems() async {
List<Map<String, dynamic>> _jsonItems =
await DynamicMockData.list(_currentPage, PAGE_SIZE);
List<DynamicEntity> _newItems =
_jsonItems.map((json) => DynamicEntity.fromJson(json)).toList();
this.setState(() {
if (_currentPage > 1) {
_listItems += _newItems;
} else {
_listItems = _newItems;
}
});
}
// 更換為網(wǎng)絡(luò)請求后
void _requestNewItems() async {
var response = await DynamicService.list(_currentPage, PAGE_SIZE);
List<dynamic> _jsonItems = response.data;
List<DynamicEntity> _newItems =
_jsonItems.map((json) => DynamicEntity.fromJson(json)).toList();
this.setState(() {
if (_currentPage > 1) {
_listItems += _newItems;
} else {
_listItems = _newItems;
}
});
}
實際開發(fā)過程中，可以讓 Mock 數(shù)據(jù)類和真實的接口類實現(xiàn)相同的接口，這樣就可以只需要替換接口的實現(xiàn)類就可以了，也就是常說的面向接口編程。
跑起來
修改完成后，直接運行代碼，效果如下所示，可以看到 id 已經(jīng)發(fā)生了改變。
總結(jié)
本篇簡單介紹了 dio ，以及使用 get 請求完成了列表數(shù)據(jù)的獲取，窺一貌而知全部，可以看到 dio 的簡單易用。后續(xù)將陸續(xù)介紹其他的請求以及更為高級的用法，來見證 dio 的強大之處。
