1
2
3
4
// axios配置 可自行根据项目进行更改,只需更改该文件即可,其他文件可以不动
// The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
import type { AxiosResponse } from 'axios';
sevth
authored
4 years ago
5
import { clone } from 'lodash-es';
Vben
authored
4 years ago
6
import type { RequestOptions, Result } from '/#/axios';
Vben
authored
4 years ago
7
8
import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform';
import { VAxios } from './Axios';
9
import { checkStatus } from './checkStatus';
vben
authored
5 years ago
10
import { useGlobSetting } from '/@/hooks/setting';
11
12
import { useMessage } from '/@/hooks/web/useMessage';
import { RequestEnum, ResultEnum, ContentTypeEnum } from '/@/enums/httpEnum';
13
import { isString, isUnDef, isNull, isEmpty } from '/@/utils/is';
Vben
authored
4 years ago
14
import { getToken } from '/@/utils/auth';
15
import { setObjToUrlParams, deepMerge } from '/@/utils';
Vben
authored
4 years ago
16
import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
vben
authored
5 years ago
17
import { useI18n } from '/@/hooks/web/useI18n';
Vben
authored
4 years ago
18
import { joinTimestamp, formatRequestDate } from './helper';
19
import { useUserStoreWithOut } from '/@/store/modules/user';
20
import { AxiosRetry } from '/@/utils/http/axios/axiosRetry';
Luke
authored
3 years ago
21
import axios from 'axios';
22
vben
authored
5 years ago
23
const globSetting = useGlobSetting();
Vben
authored
4 years ago
24
const urlPrefix = globSetting.urlPrefix;
mfish
authored
3 years ago
25
const { createMessage, createErrorModal, createSuccessModal } = useMessage();
26
27
28
29
30
31
/**
* @description: 数据处理,方便区分多种处理方式
*/
const transform: AxiosTransform = {
/**
32
* @description: 处理响应数据。如果数据不是预期格式,可直接抛出错误
33
*/
34
transformResponseHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
vben
authored
5 years ago
35
const { t } = useI18n();
Vben
authored
4 years ago
36
const { isTransformResponse, isReturnNativeResponse } = options;
37
38
39
40
// 是否返回原生响应头 比如:需要获取响应头时使用该属性
if (isReturnNativeResponse) {
return res;
}
41
42
// 不进行任何处理,直接返回
// 用于页面代码可能需要直接获取code,data,message这些信息时开启
Vben
authored
4 years ago
43
if (!isTransformResponse) {
44
45
46
47
48
49
50
return res.data;
}
// 错误的时候返回
const { data } = res;
if (!data) {
// return '[HTTP] Request has no return value';
51
throw new Error(t('sys.api.apiRequestFailed'));
52
53
54
55
56
57
}
// 这里 code,result,message为 后台统一的字段,需要在 types.ts内修改为项目自己的接口返回格式
const { code, result, message } = data;
// 这里逻辑可以根据项目进行修改
const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
58
if (hasSuccess) {
mfish
authored
3 years ago
59
let successMsg = message;
60
61
62
if (isNull(successMsg) || isUnDef(successMsg) || isEmpty(successMsg)) {
successMsg = t(`sys.api.operationSuccess`);
mfish
authored
3 years ago
63
}
64
mfish
authored
3 years ago
65
66
67
68
69
if (options.successMessageMode === 'modal') {
createSuccessModal({ title: t('sys.api.successTip'), content: successMsg });
} else if (options.successMessageMode === 'message') {
createMessage.success(successMsg);
}
nebv
authored
5 years ago
70
return result;
71
}
72
73
74
// 在此处根据自己项目的实际情况对不同的code执行不同的操作
// 如果不希望中断当前请求,请return数据,否则直接抛出异常即可
75
let timeoutMsg = '';
76
77
switch (code) {
case ResultEnum.TIMEOUT:
78
timeoutMsg = t('sys.api.timeoutMessage');
79
80
81
const userStore = useUserStoreWithOut();
userStore.setToken(undefined);
userStore.logout(true);
82
break;
83
84
default:
if (message) {
85
timeoutMsg = message;
86
}
87
}
88
前端爱码士
authored
3 years ago
89
// errorMessageMode='modal'的时候会显示modal错误弹窗,而不是消息提示,用于一些比较重要的错误
90
91
92
93
94
95
96
97
// errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
if (options.errorMessageMode === 'modal') {
createErrorModal({ title: t('sys.api.errorTip'), content: timeoutMsg });
} else if (options.errorMessageMode === 'message') {
createMessage.error(timeoutMsg);
}
throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'));
98
99
100
101
},
// 请求之前处理config
beforeRequestHook: (config, options) => {
vben
authored
4 years ago
102
const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
103
104
if (joinPrefix) {
Vben
authored
4 years ago
105
config.url = `${urlPrefix}${config.url}`;
106
107
108
109
110
}
if (apiUrl && isString(apiUrl)) {
config.url = `${apiUrl}${config.url}`;
}
vben
authored
5 years ago
111
const params = config.params || {};
112
113
const data = config.data || false;
formatDate && data && !isString(data) && formatRequestDate(data);
vben
authored
5 years ago
114
if (config.method?.toUpperCase() === RequestEnum.GET) {
vben
authored
5 years ago
115
if (!isString(params)) {
vben
authored
4 years ago
116
// 给 get 请求加上时间戳参数,避免从缓存中拿数据。
Vben
authored
4 years ago
117
config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
118
119
} else {
// 兼容restful风格
Vben
authored
4 years ago
120
config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
vben
authored
5 years ago
121
config.params = undefined;
122
123
}
} else {
vben
authored
5 years ago
124
125
if (!isString(params)) {
formatDate && formatRequestDate(params);
Luke
authored
3 years ago
126
127
128
129
130
if (
Reflect.has(config, 'data') &&
config.data &&
(Object.keys(config.data).length > 0 || config.data instanceof FormData)
) {
131
132
133
134
135
136
137
config.data = data;
config.params = params;
} else {
// 非GET请求如果没有提供data,则将params视为data
config.data = params;
config.params = undefined;
}
138
if (joinParamsToUrl) {
139
140
config.url = setObjToUrlParams(
config.url as string,
vben
authored
4 years ago
141
Object.assign({}, config.params, config.data),
142
);
143
144
145
}
} else {
// 兼容restful风格
vben
authored
5 years ago
146
config.url = config.url + params;
vben
authored
5 years ago
147
config.params = undefined;
148
149
150
151
152
153
154
155
}
}
return config;
},
/**
* @description: 请求拦截器处理
*/
Vben
authored
4 years ago
156
requestInterceptors: (config, options) => {
157
// 请求之前处理config
Vben
authored
4 years ago
158
const token = getToken();
159
if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
160
// jwt token
161
(config as Recordable).headers.Authorization = options.authenticationScheme
Vben
authored
4 years ago
162
163
? `${options.authenticationScheme} ${token}`
: token;
164
165
166
167
168
}
return config;
},
/**
169
170
171
172
173
174
175
* @description: 响应拦截器处理
*/
responseInterceptors: (res: AxiosResponse<any>) => {
return res;
},
/**
176
177
* @description: 响应错误处理
*/
178
responseInterceptorsCatch: (axiosInstance: AxiosResponse, error: any) => {
vben
authored
5 years ago
179
const { t } = useI18n();
Vben
authored
4 years ago
180
181
const errorLogStore = useErrorLogStoreWithOut();
errorLogStore.addAjaxErrorInfo(error);
182
183
const { response, code, message, config } = error || {};
const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none';
vben
authored
5 years ago
184
185
const msg: string = response?.data?.error?.message ?? '';
const err: string = error?.toString?.() ?? '';
186
187
let errMessage = '';
Luke
authored
3 years ago
188
189
190
191
if (axios.isCancel(error)) {
return Promise.reject(error);
}
192
193
try {
if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
194
errMessage = t('sys.api.apiTimeoutMessage');
195
}
vben
authored
5 years ago
196
if (err?.includes('Network Error')) {
197
198
199
200
201
202
203
204
205
206
errMessage = t('sys.api.networkExceptionMsg');
}
if (errMessage) {
if (errorMessageMode === 'modal') {
createErrorModal({ title: t('sys.api.errorTip'), content: errMessage });
} else if (errorMessageMode === 'message') {
createMessage.error(errMessage);
}
return Promise.reject(error);
207
208
}
} catch (error) {
209
throw new Error(error as unknown as string);
210
}
211
212
checkStatus(error?.response?.status, msg, errorMessageMode);
213
214
215
216
217
218
219
220
// 添加自动重试机制 保险起见 只针对GET请求
const retryRequest = new AxiosRetry();
const { isOpenRetry } = config.requestOptions.retryRequest;
config.method?.toUpperCase() === RequestEnum.GET &&
isOpenRetry &&
// @ts-ignore
retryRequest.retry(axiosInstance, error);
vben
authored
5 years ago
221
return Promise.reject(error);
222
223
224
225
226
},
};
function createAxios(opt?: Partial<CreateAxiosOptions>) {
return new VAxios(
227
// 深度合并
228
229
deepMerge(
{
Vben
authored
4 years ago
230
231
232
233
// See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
// authentication schemes,e.g: Bearer
// authenticationScheme: 'Bearer',
authenticationScheme: '',
234
235
timeout: 10 * 1000,
// 基础接口地址
236
// baseURL: globSetting.apiUrl,
vben
authored
4 years ago
237
238
headers: { 'Content-Type': ContentTypeEnum.JSON },
vben
authored
5 years ago
239
240
// 如果是form-data格式
// headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
241
// 数据处理方式
sevth
authored
4 years ago
242
transform: clone(transform),
243
244
245
246
// 配置项,下面的选项都可以在独立的接口请求中覆盖
requestOptions: {
// 默认将prefix 添加到url
joinPrefix: true,
247
248
// 是否返回原生响应头 比如:需要获取响应头时使用该属性
isReturnNativeResponse: false,
249
// 需要对返回数据进行处理
Vben
authored
4 years ago
250
isTransformResponse: true,
251
252
253
254
255
// post请求的时候添加参数到url
joinParamsToUrl: false,
// 格式化提交参数时间
formatDate: true,
// 消息提示类型
vben
authored
5 years ago
256
errorMessageMode: 'message',
257
258
// 接口地址
apiUrl: globSetting.apiUrl,
259
260
// 接口拼接地址
urlPrefix: urlPrefix,
vben
authored
5 years ago
261
262
// 是否加入时间戳
joinTime: true,
Vben
authored
4 years ago
263
264
// 忽略重复请求
ignoreCancelToken: true,
265
266
// 是否携带token
withToken: true,
267
268
269
270
271
retryRequest: {
isOpenRetry: true,
count: 5,
waitTime: 100,
},
272
273
},
},
vben
authored
4 years ago
274
275
opt || {},
),
276
277
278
279
280
281
282
283
);
}
export const defHttp = createAxios();
// other api url
// export const otherHttp = createAxios({
// requestOptions: {
// apiUrl: 'xxx',
284
// urlPrefix: 'xxx',
285
286
// },
// });