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,
    }
  );
}

最后

若是在使用过程遇到问题，欢迎下方留言交流。