# 错误处理
# 页面
404
页面级的错误处理是由 vue-router
统一处理,所有匹配不到正确路由的页面都会进 404
页面。
{
title: 'app.global.menu.notfound',
path: '/:pathMatch(.*)*',
component: () => import('@/views/404/index.vue'),
}
1
2
3
4
5
2
3
4
5
注意事项
这里有一个需要非常注意的地方就是 404
页面路由一定要在所有路由最后
# 请求
项目里所有的请求都会走 @/utils/request.ts
里面创建的的 Axios
实例,它统一做了错误处理,完整代码 (opens new window)。
你可以在errorHandler
中根据自己的实际业务统一针对不同的状态码或者根据自定义 code 来做错误处理。如:
/**
* 异常处理程序
*/
const errorHandler = (error: any) => {
const { response, message } = error;
if (message === 'CustomError') {
// 自定义错误
const { config, data } = response;
const { url, baseURL} = config;
const { code, msg } = data;
const reqUrl = url.split("?")[0].replace(baseURL, '');
const noVerifyBool = settings.ajaxResponseNoVerifyUrl.includes(reqUrl);
if (!noVerifyBool) {
notification.error({
message: `提示`,
description: customCodeMessage[code] || msg || 'Error',
});
if (code === 10002) {
router.replace('/user/login');
}
}
} else if (message === 'CancelToken') {
// 取消请求 Token
// eslint-disable-next-line no-console
console.log(message);
} else if (response && response.status) {
const errorText = serverCodeMessage[response.status] || response.statusText;
const { status, request } = response;
notification.error({
message: `请求错误 ${status}: ${request.responseURL}`,
description: errorText,
});
} else if (!response) {
notification.error({
description: '您的网络发生异常,无法连接服务器',
message: '网络异常',
});
}
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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
← 主题