上一篇说axios并发的时候有提到 axios的请求统一管理是为了创建拦截器
具体说一下拦截器的创建
import Vue from 'vue';
import axios from 'axios'; // 引入axios
import { Message } from 'element-ui'; // 为了方便统一提示 引入element的Message
创建axios实例
const request = axios.create({
baseURL: myUrl , // api的base_url
timeout: 30 * 60 * 1000 // request timeout
})
request.__proto__ = axios;
/**
* 创建请求拦截器
*/
request
.interceptors
.request
.
use(
config
=> {
// 获取token 统一在请求的headers里面加入
Access-Token
const token
= Vue
.ls
.
get(ACCESS_TOKEN)
if (token) {
config
.
headers[
'Access-Token']
= token;
}
/** 清楚get方法的缓存：尤其是IE浏览器缓存 */
if (config
.method
.
toLocaleUpperCase()
===
'GET') {
if (
!config
.
params) config
.
params
= {};
config
.
params[
'sendleTime']
=
new Date()
.
getTime();
}
return config;
}
,
error
=> {
Message({
message
:
'客户端请求错误: '
+ error
.
message
,
type
:
'error'
,
duration
:
3
*
1000
});
return
Promise
.
reject(error)
}
)
/**
* 创建响应拦截器
*/
request
.interceptors
.response
.
use(
response
=> {
const res
= response
.
data;
const code
= res
.
status
,
if (code
!==
200) {
//状态码 !=200时，统一处理异常
return
Promise
.
reject(res
.
msg);
}
else {
return response
.
data;
}
}
,
error
=> {
let errMsg
=
"请求发生错误"
Message({
message
: errMsg
,
type
:
'error'
,
duration
:
3
*
1000
})
return
Promise
.
reject(error)
}
)