上一篇说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)
}
)