Flutter 封装 dio,支持 Restful Api
作者: dkvirus 发表于: 2019-01-31 11:26:44 最近更新: 2019-01-31 20:57:47

背景

Dio 是 Flutter 第三方开源的网络请求库,直接使用原生 api 有点冗余,二次封装使用更加方便。

为什么要封装 dio?

做一些公共处理。

要做哪些公共处理?

  • 统一处理请求前缀;(https://novel.dkvirus.com/api/v1 不用每个请求都加这个前缀)
  • 统一打印请求信息;
  • 统一打印响应信息;
  • 统一打印报错信息;
  • 返回数据自动转 json 格式;

如果你是 Flutter 新手,just 想要发送网络请求,这个封装的工具类就显得很有用了,copy and use it.

快速开始

添加 dio 依赖

编辑 项目根目录/pubspec.yaml,找到 dependecies 属性,添加 dio 依赖。

1
2
3
4
5
dependencies:
flutter:
sdk: flutter

dio: 1.0.13

添加工具类

新建 项目根目录/utils/HttpUtils.dart,将下面内容 copy 进去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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;
}

}

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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,
}
);
}

最后

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

首页
友链
归档
dkvirus
动态
RSS