import axios from 'axios';
// generateReqKey:用于根据当前请求的信息,生成请求 Key;
function generateReqKey(config) {
const { method, url, data, params } = config;
return [method, url, qs.stringify(data), qs.stringify(params)].join('&');
}
// addPendingRequest:用于把当前请求信息添加到 pendingRequest 对象中;
const penddingRequest = new Map();
function addPendingRequest(config) {
const requestKey = generateReqKey(config);
config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
if (!penddingRequest.has(requestKey)) {
penddingRequest.set(requestKey, cancel);
}
});
}
// removePendingRequest:检查是否存在重复请求,若存在则取消已发的请求。
function removePendingRequest(config) {
const requestKey = generateReqKey(config);
if (penddingRequest.has(requestKey)) {
const cancelToken = penddingRequest.get(requestKey);
cancelToken(requestKey);
penddingRequest.delete(requestKey);
}
}
let instance = axios.create();
instance.interceptors.request.use(config => {
removePendingRequest(config ); // 检查是否存在重复请求,若存在则取消已发的请求
addPendingRequest(config ); // 把当前请求信息添加到pendingRequest对象中
const token = "xxx"; // 在vuex里面保存的token
if(token) {
// 存在token时则在请求头headers里加入token
// X-Token为自定义字段,根据后端的规定来定义
config.headers["X-Token"] = token
}
return config
})
instance.interceptors.response.use(response => {
removePendingRequest(responseError.config); // 请求成功,移除该请求
if(response.data.code === 200){
return response;
}
})
版权声明:本文为qq_42613224原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。