UniApp Matrix Admin 文档拦截器配置
你想去便去？想来便来？你当这里是哪里
请求拦截器
你可以为每个请求拦截器配置 onResolved 或 onRejected 两个钩子函数。
onResolved
我们会为 onResolved 钩子函数注入 config 和 options 两个参数：
config: LuchRequestConfig: luch-request 请求配置，详情参考 luch-request 请求配置options: Object: 应用配置，包含: { Router, store }，可根据需要扩展。
onRejected
我们会为 onRejected 钩子函数注入 error 和 options 两个参数：
error: Error: luch-request 请求错误对象，详情参考 luch-request 请求配置options: Object: 应用配置，包含: { Router, store }，可根据需要扩展。
如下，为一个完整的请求拦截器配置：
const reqCommon = {
// 发送请求之前做些什么
onResolved(config, { Router }) {
// 格式化参数 (过滤参数中的空值)
config.params = config.params ? filterEmpty.removeEmptyFields(config.params) || {} : {}
if (config.method !== 'GET') {
config.data = filterEmpty.removeEmptyFields(config.data || {}) || {}
}
// 请求携带 token 认证
const access_token = cookie.access_token()
if (config.custom.token) {
if (access_token) {
config.header['X-Access-Token'] = access_token
} else {
uni.$u.toast('登录时效过期，请重新登录！')
setTimeout(() => {
Router.replaceAll({ path: '/login' })
}, 1000)
}
}
return config
},
// 请求出错时做些什么
onRejected(error, options) {
return Promise.reject(error)
}
}
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
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
响应拦截器
响应拦截器也同样可以配置 onResolved 或 onRejected 两个钩子函数。
onResolved
我们会为 onResolved 钩子函数注入 response 和 options 两个参数：
response: LuchRequestConfig: luch-request 响应对象，详情参考 luch-request 响应对象options: Object: 应用配置，包含: { Router, store }，可根据需要扩展。
onRejected
我们会为 onRejected 钩子函数注入 error 和 options 两个参数：
error: Error: luch-request 请求错误对象，详情参考 luch-request 请求配置options: Object: 应用配置，包含: { Router, store }，可根据需要扩展。
如下，为一个完整的响应拦截器配置：
const resp401 = {
// 响应数据之前做点什么
onResolved(response, options) {
if (response.status === 401) {
// we can do something ...
}
return response
},
// 响应出错时做点什么
onRejected(error, options) {
if (response.status === 401) {
// we can do something ...
}
return Promise.reject(error)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
导出拦截器
定义好拦截器后，只需在 src/http/interceptors.js 文件中导出即可。分为两类，请求拦截器 和 响应拦截器。如下：
export default {
request: [reqCommon], // 请求拦截
response: [resp401] // 响应拦截
}
1
2
3
4
2
3
4
完整的拦截器配置示例
import Cookie from "@utils/cookie";
import filterEmpty from '@/utils/filterEmpty'
// 请求拦截
const reqCommon = {
// 发送请求之前做些什么
onResolved(config, { Router }) {
// 格式化参数 (过滤参数中的空值)
config.params = config.params ? filterEmpty.removeEmptyFields(config.params) || {} : {}
if (config.method !== 'GET') {
config.data = filterEmpty.removeEmptyFields(config.data || {}) || {}
}
// 请求携带 token 认证
const access_token = Cookie.access_token()
if (config.custom.token) {
if (access_token) {
config.header['X-Access-Token'] = access_token
} else {
uni.$u.toast('登录时效过期，请重新登录！')
setTimeout(() => {
Router.replaceAll({ path: '/login' })
}, 1500)
}
}
return config
},
// 请求出错时做些什么
onRejected(error) {
return Promise.reject(error)
}
}
// 响应拦截 statusCode === 401
const resp401 = {
onResolved(response) {
if (response.statusCode === 401) {
uni.$matrix.warning(response.config.url)
}
return response
},
onRejected(error) {
if (error.statusCode === 401) {
uni.$matrix.error(error.config.url)
}
return Promise.reject(error)
}
}
// 响应拦截 statusCode === 404
const resp404 = {
onResolved(response) {
if (response.statusCode === 404) {
uni.$matrix.warning(response.config.url)
}
return response
},
onRejected(error) {
if (error.statusCode === 404) {
uni.$matrix.error(error.config.url)
}
return Promise.reject(error)
}
}
// 响应拦截 statusCode === 500
const resp500 = {
onResolved(response) {
if (response.statusCode === 500) {
uni.$matrix.warning(response.config.url)
}
return response
},
onRejected(error) {
if (error.statusCode === 500) {
uni.$matrix.error(error.config.url)
}
return Promise.reject(error)
}
}
// 响应拦截 statusCode === 502
const resp502 = {
onResolved(response) {
if (response.statusCode === 502) {
uni.$matrix.warning(response.config.url)
}
return response
},
onRejected(error) {
if (error.statusCode === 502) {
uni.$matrix.error(error.config.url)
}
return Promise.reject(error)
}
}
// 响应拦截 statusCode === 503
const resp503 = {
onResolved(response) {
if (response.statusCode === 503) {
uni.$matrix.warning(response.config.url)
}
return response
},
onRejected(error) {
if (error.statusCode === 503) {
uni.$matrix.error(error.config.url)
}
return Promise.reject(error)
}
}
// 响应拦截 statusCode === 200
const resp200 = {
onResolved(response, { Router }) {
if (response.statusCode === 200) {
/* eslint-disable */
switch (String(response.data.code)) {
case '200':
return response.data.value
case '800':
case '900':
uni.$u.toast(response.data.message)
return Promise.reject(response.data.message)
case '90000':
uni.$u.toast('登录时效过期，请重新登录！')
setTimeout(() => {
Router.replaceAll({name: 'login'})
}, 1000)
break
default:
break
}
/* eslint-enable */
}
}
}
// 响应拦截 请求超时
const timeout = {
onRejected(error) {
const { errMsg } = error
if (errMsg === 'request:fail timeout') {
uni.$u.toast('请求超时！')
}
return Promise.reject(error)
}
}
// 响应拦截 设备断网
const noNetwork = {
onRejected(error) {
const { errMsg } = error
if (errMsg === 'request:fail ') {
uni.$u.toast('网络连接失败，请检查网络！')
}
return Promise.reject(error)
}
}
export default {
// 请求拦截
request: [reqCommon],
// 响应拦截
response: [resp401, resp404, resp500, resp502, resp503, timeout, noNetwork, resp200]
}
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
:::