request.js
2.4 KB
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
/*
* @Description: 此文件主要创建 axios 实例，然后添加请求拦截器和响应拦截器
* @Autor: renchao
* @LastEditTime: 2023-05-26 10:04:58
*/
import Vue from 'vue'
import axios from "axios";
import { Message } from "element-ui";
import { endLoadingSubCount } from "./requestLoading";
import router from "../router";
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
withCredentials: true, //是否允许跨域
headers: {
"Content-Type": "application/json; charset=utf-8",
},
timeout: 15000,
});
// request interceptor
service.interceptors.request.use(
(config) => {
//调用登录接口时无token，也不需要传token，其他接口都传入token
config.headers.Authorization = localStorage.getItem("token") || "";
config.headers.Accept = "application/json";
return config;
},
(error) => {
Message.error("请求超时!");
return Promise.reject(error);
}
);
window.tokenValid = true
// response interceptor
service.interceptors.response.use(
(response) => {
/**
* 对响应数据判断:
* 如果成功返回数据，就通过return把数据返出去
* 如果请求不成功，就在拦截器这里统一处理（组件的代码就不用关注错误的情况了）
*/
if (response.status == 200) {
return response.data;
} else {
// 对响应错误做点什么
Message({
message: "请求失败",
type: "error",
duration: 5 * 1000,
});
}
return response;
},
(error) => {
handleErrorData(error.response.status);
endLoadingSubCount();
return Promise.reject(error);
}
);
//对错误信息的处理函数
function handleErrorData (status) {
switch (status) {
case 401:
// 多个请求不重复提示错误信息
if (window.tokenValid) {
window.tokenValid = false;
Message.error("由于长时间未操作，请重新登录!");
localStorage.removeItem("token");
router.replace({
path: "/login",
query: {
redirect: router.history.current.fullPath,
}
})
}
break;
case 404:
Message.error("很抱歉，资源未找到!");
break;
case 500:
Message.error("服务器错误!");
break;
default:
Message.error("服务正在联调中，请稍后!");
break;
}
}
export default service;