在我們開發 APP 時，相信大家一定會時常與後端進行資料交換對吧
今天要介紹的 Dio 便是一個便於我們與後端取得資料的套件
而基於該套件所開發出來的應用程式更是十分多樣
有興趣的讀者可以透過連結來查閱參訪
具體的使用是如何呢？
我們可以參考以下的說明

Dio

Dio 會協助我們開啟 HttpClient 來與對應的資料來源進行資料取得的行為
簡單的應用如下

Get

Response response;
var dio = Dio();

// 以下兩者是等價的操作
response = await dio.get('/test?id=12&name=wendu');
response = await dio.get('/test', queryParameters: {'id': 12, 'name': 'wendu'});
// 回傳的資料 -> response.data

Post

response = await dio.post('/test', data: {'id': 12, 'name': 'wendu'});

Multiple Request

response = await Future.wait([dio.post('/info'), dio.get('/token')]);

Download

response = await dio.download('https://www.google.com/', './xx.html');

而更多的範例可以直接查閱套件文件說明
Dio 額外還提供了許多的第三方 Plugin 以供我們使用

dio_cookie_manager

可透過新增這個 Plugin 來進行 cookie 的紀錄及操作
因此我們便能透過 Cookie 機制來進行一些額外的操作了

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

main() async {
  var dio =  Dio();
  var cookieJar=CookieJar();
  dio.interceptors.add(CookieManager(cookieJar));
  
  // first request, and save cookies (CookieManager do it).
  await dio.get("https://baidu.com/");
  
  // Print cookies
  // print(await cookieJar.loadForRequest(Uri.parse("https://baidu.com/")));

  // second request with the cookies
  await dio.get("https://baidu.com/");
  ... 
}

pretty_dio_logger

可以將 Request 及 Response 記錄下來
並且進行額外的格式化讓我們方便做問題追蹤及相關紀錄調閱

Dio dio = Dio();
dio.interceptors.add(PrettyDioLogger());
// customization
   dio.interceptors.add(PrettyDioLogger(
        requestHeader: true,
        requestBody: true,
        responseBody: true,
        responseHeader: false,
        error: true,
        compact: true,
        maxWidth: 90));

我們可以透過這個套件所提供的便利功能來進行資料操作
而在使用前可以針對以上提及的功能進行封裝
來提供像是全域Log、Error Handle ...等功能
更多詳細內容可以參照參考資料內的內容來嘗試

參考資料

Flutter 網路請求 Dio 封裝
套件說明文件