Flutter 封装 dio,支持 Restful Api

原创
2019/01/31 20:58
阅读数 3.2W

背景

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

最后

如果在使用过程遇到问题,欢迎下方留言交流。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
2 评论
0 收藏
0
分享
返回顶部
顶部