Flutter 網絡請求封裝之Dio（Cookie管理、添加攔截器、下載文件、异常處理、取消請求等）

之所以封裝，千言萬語匯成一句話：方便使用。

Dio相關

dio是一個强大的Dart Http請求庫，支持Restful API、FormData、攔截器、請求取消、Cookie管理、文件上傳/下載、超時、自定義適配器等...

• 添加依賴，注意3.0.+是不兼容昇級

dependencies:
 dio: ^3.0.9


• 一個極簡示例

import 'package:dio/dio.dart';
void getHttp() async {
 try {
 Response response = await Dio().get("http://www.baidu.com");
 print(response);
 } catch (e) {
 print(e);
 }
}


<br>

封裝開始

• 網絡請求是經常會用到的，所以直接來一個單例，新建一個名為httpUtil的文件

class HttpUtil {
 static HttpUtil instance;
 Dio dio;
 BaseOptions options;

 CancelToken cancelToken = new CancelToken();

 static HttpUtil getInstance() {
 if (null == instance) instance = new HttpUtil();
 return instance;
 }
}


• 配置和初始化Dio

 /*
 * config it and create
 */
 HttpUtil() {
 //BaseOptions、Options、RequestOptions 都可以配置參數，優先級別依次遞增，且可以根據優先級別覆蓋參數
 options = new BaseOptions(
 //請求基地址,可以包含子路徑
 baseUrl: "http://www.google.com",
 //連接服務器超時時間，單比特是毫秒.
 connectTimeout: 10000,
 //響應流上前後兩次接受到數據的間隔，單比特為毫秒。
 receiveTimeout: 5000,
 //Http請求頭.
 headers: {
 //do something
 "version": "1.0.0"
 },
 //請求的Content-Type，默認值是"application/json; charset=utf-8",Headers.formUrlEncodedContentType會自動編碼請求體.
 contentType: Headers.formUrlEncodedContentType,
 //錶示期望以那種格式(方式)接受響應數據。接受4種類型 `json`, `stream`, `plain`, `bytes`. 默認值是 `json`,
 responseType: ResponseType.json,
 );

 dio = new Dio(options);
 }


配置一目了然，但是有一個潜在的問題，細心的同學可能會發現，baseUrl的參數是固定的，在實際開發中請求兩個及以上的域名地址是有很大可能的，所以我們怎麼動態更換baseUrl呢？

這裏的配置我們用的是BaseOptions，其實還有Options、RequestOptions， 都可以配置參數，優先級別依次遞增，且可以根據優先級別覆蓋參數

BaseOptions 基類請求配置Options單次請求配置RequestOptions實際請求配置

所以，我們可以在需要的地方創建RequestOptions，然後代替或覆蓋BaseOptions 加到請求參數中

比如：

RequestOptions requestOptions=new RequestOptions(
 baseUrl: "http://www.google.com/aa/bb/cc/"
 );


<br>

get請求

 /*
 * get請求
 */
 get(url, {data, options, cancelToken}) async {
 Response response;
 try {
 response = await dio.get(url, queryParameters: data, options: options, cancelToken: cancelToken);
 print('get success---------${response.statusCode}');
 print('get success---------${response.data}');

// response.data; 響應體
// response.headers; 響應頭
// response.request; 請求體
// response.statusCode; 狀態碼

 } on DioError catch (e) {
 print('get error---------$e');
 formatError(e);
 }
 return response.data;
 }


url：請求地址data：請求參數options：請求配置cancelToken：取消標識

<br>

post請求

 /*
 * post請求
 */
 post(url, {data, options, cancelToken}) async {
 Response response;
 try {
 response = await dio.post(url, queryParameters: data, options: options, cancelToken: cancelToken);
 print('post success---------${response.data}');
 } on DioError catch (e) {
 print('post error---------$e');
 formatError(e);
 }
 return response.data;
 }


post Form錶單

跟一般的post請求大同小异，只是data的變化而已

FormData formData = FormData.from({
 "name": "wendux",
 "age": 25,
 });
response = await dio.post("/info", data: formData);


創建FormData，然後代替原來的data即可

<br>

异常處理

出現异常的時候，當然是知道的越清晰越仔細越好，也越容易處理

 /*
 * error統一處理
 */
 void formatError(DioError e) {
 if (e.type == DioErrorType.CONNECT_TIMEOUT) {
 // It occurs when url is opened timeout.
 print("連接超時");
 } else if (e.type == DioErrorType.SEND_TIMEOUT) {
 // It occurs when url is sent timeout.
 print("請求超時");
 } else if (e.type == DioErrorType.RECEIVE_TIMEOUT) {
 //It occurs when receiving timeout
 print("響應超時");
 } else if (e.type == DioErrorType.RESPONSE) {
 // When the server response, but with a incorrect status, such as 404, 503...
 print("出現异常");
 } else if (e.type == DioErrorType.CANCEL) {
 // When the request is cancelled, dio will throw a error with this type.
 print("請求取消");
 } else {
 //DEFAULT Default error type, Some other Error. In this case, you can read the DioError.error if it is not null.
 print("未知錯誤");
 }
 }


<br>

Cookie管理

Cookie管理是http中繞不開的話題，要保持回話持久，就要cookie持久化

• 依賴

dependencies:
 dio_cookie_manager: ^1.0.0


• 引入

import 'package:cookie_jar/cookie_jar.dart';
import 'package:dio/dio.dart';
import 'package:dio_cookie_manager/dio_cookie_manager.dart';


• 使用

//Cookie管理
dio.interceptors.add(CookieManager(CookieJar()));


<br>

添加攔截器

攔截器可以在請求之前、響應之前、error之前做一些預處理


 dio = new Dio(options);
 
 //添加攔截器
 dio.interceptors.add(InterceptorsWrapper(onRequest: (RequestOptions options) {
 print("請求之前");
 // Do something before request is sent
 return options; //continue
 }, onResponse: (Response response) {
 print("響應之前");
 // Do something with response data
 return response; // continue
 }, onError: (DioError e) {
 print("錯誤之前");
 // Do something with response error
 return e; //continue
 }));


<br>

下載文件

下載文件也是經常會用到的，比如下載圖片，或者是更新

 /*
 * 下載文件
 */
 downloadFile(urlPath, savePath) async {
 Response response;
 try {
 response = await dio.download(urlPath, savePath,onReceiveProgress: (int count, int total){
 //進度
 print("$count $total");
 });
 print('downloadFile success---------${response.data}');
 } on DioError catch (e) {
 print('downloadFile error---------$e');
 formatError(e);
 }
 return response.data;
 }


<br>

取消請求

 /*
 * 取消請求
 *
 * 同一個cancel token 可以用於多個請求，當一個cancel token取消時，所有使用該cancel token的請求都會被取消。
 * 所以參數可選
 */
 void cancelRequests(CancelToken token) {
 token.cancel("cancelled");
 }


<br>

Https證書校驗

有兩種方法可以校驗https證書，假設我們的後臺服務使用的是自簽名證書，證書格式是PEM格式，我們將證書的內容保存在本地字符串中，那麼我們的校驗邏輯如下：

String PEM="XXXXX"; // certificate content
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
 client.badCertificateCallback=(X509Certificate cert, String host, int port){
 if(cert.pem==PEM){ // Verify the certificate
 return true;
 }
 return false;
 };
};


X509Certificate是證書的標准格式，包含了證書除私鑰外所有信息，讀者可以自行查閱文檔。另外，上面的示例沒有校驗host，是因為只要服務器返回的證書內容和本地的保存一致就已經能證明是我們的服務器了（而不是中間人），host驗證通常是為了防止證書和域名不匹配。

對於自簽名的證書，我們也可以將其添加到本地證書信任鏈中，這樣證書驗證時就會自動通過，而不會再走到badCertificateCallback回調中：

(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
 SecurityContext sc = new SecurityContext();
 //file is the path of certificate
 sc.setTrustedCertificates(file);
 HttpClient httpClient = new HttpClient(context: sc);
 return httpClient;
};


注意，通過setTrustedCertificates()設置的證書格式必須為PEM或PKCS12，如果證書格式為PKCS12，則需將證書密碼傳入，這樣則會在代碼中暴露證書密碼，所以客戶端證書校驗不建議使用PKCS12格式的證書。

<br>

調用示例

 var response = await HttpUtil().get("http://www.baidu.com");
 print(response.toString());


json解析查看：

Flutter Json自動解析之FlutterJsonBeanFactory

<br>

完整代碼

github：

https://github.com/yechaoa/wanandroid_flutter

<br>

覺得有用點個贊唄 ^ _ ^

<br><br>