Flutter 封裝 dio，支持 Restful Api

背景

Dio 是 Flutter 第三方開源的網絡請求庫，直接使用原生 api 有點冗餘，二次封裝使用更加方便。

爲何要封裝 dio？

作一些公共處理。

要作哪些公共處理？

• 統一處理請求前綴；（https://novel.dkvirus.com/api/v1 不用每一個請求都加這個前綴）
• 統一打印請求信息；
• 統一打印響應信息；
• 統一打印報錯信息；
• 返回數據自動轉 json 格式；

若是你是 Flutter 新手，just 想要發送網絡請求，這個封裝的工具類就顯得頗有用了，copy and use it.

快速開始

添加 dio 依賴

編輯 項目根目錄/pubspec.yaml，找到 dependecies 屬性，添加 dio 依賴。

dependencies:
  flutter:
    sdk: flutter

  dio: 1.0.13

添加工具類

新建 項目根目錄/utils/HttpUtils.dart，將下面內容 copy 進去。

import 'package:dio/dio.dart';
import 'dart:async';

/*
 * 封裝 restful 請求
 * 
 * GET、POST、DELETE、PATCH
 * 主要做用爲統一處理相關事務：
 *  - 統一處理請求前綴；
 *  - 統一打印請求信息；
 *  - 統一打印響應信息；
 *  - 統一打印報錯信息；
 */
class HttpUtils {

  /// global dio object
  static Dio dio;

  /// default options
  static const String API_PREFIX = 'https://novel.dkvirus.com/api/v1';
  static const int CONNECT_TIMEOUT = 10000;
  static const int RECEIVE_TIMEOUT = 3000;

  /// http request methods
  static const String GET = 'get';
  static const String POST = 'post';
  static const String PUT = 'put';
  static const String PATCH = 'patch';
  static const String DELETE = 'delete';

  /// request method
  static Future<Map> request (
    String url, 
    { data, method }) async {

    data = data ?? {};
    method = method ?? 'GET';

    /// restful 請求處理   
    /// /gysw/search/hist/:user_id        user_id=27
    /// 最終生成 url 爲     /gysw/search/hist/27
    data.forEach((key, value) {
      if (url.indexOf(key) != -1) {
        url = url.replaceAll(':$key', value.toString());
      }
    });

    /// 打印請求相關信息：請求地址、請求方式、請求參數
    print('請求地址：【' + method + '  ' + url + '】');
    print('請求參數：' + data.toString());

    Dio dio = createInstance();
    var result;

    try {
      Response response = await dio.request(url, data: data, options: new Options(method: method));

      result = response.data;

      /// 打印響應相關信息
      print('響應數據：' + response.toString());
    } on DioError catch (e) {
      /// 打印請求失敗相關信息
      print('請求出錯：' + e.toString());
    } 

    return result;
  }

  /// 建立 dio 實例對象
  static Dio createInstance () {
    if (dio == null) {
      /// 全局屬性：請求前綴、鏈接超時時間、響應超時時間
      Options options = new Options(
          baseUrl: API_PREFIX,
          connectTimeout: CONNECT_TIMEOUT,
          receiveTimeout: RECEIVE_TIMEOUT,
      );

      dio = new Dio(options);
    }

    return dio;
  }

  /// 清空 dio 對象
  static clear () {
    dio = null;
  }

}

使用示例

import 'dart:async';
import '../utils/HttpUtils.dart';

// GET 請求
// 返回的結果直接就是 json 格式
// 要使用 await，必須在方法名後面加上 async
_handleGetShelf () async {
  var result = await HttpUtils.request(
    '/gysw/shelf', 
    method: HttpUtils.GET,
    data: {
      'id': 1,
    }
  );
}


// POST 請求
_handleAddShelf () async {
  var result = await HttpUtils.request(
    '/gysw/shelf', 
    method: HttpUtils.POST,
    data: {
      'id': 1,
    }
  );
}

// PUT 請求
_handleEditShelf () async{
  var result = await HttpUtils.request(
    '/gysw/shelf/:id', 
    method: HttpUtils.PUT,
    data: {
      'id': 1,
    }
  );
}

// DELETE 請求
_handleDelShelf () async {
  var result = await HttpUtils.request(
    '/gysw/shelf/:id', 
    method: HttpUtils.DELETE,
    data: {
      'id': 1,
    }
  );
}

最後

若是在使用過程遇到問題，歡迎下方留言交流。