Vue中取消正在请求中的接口
程序员文章站
2022-05-24 18:22:34
...
vue接口请求配置中加入拦截器
// request拦截器
service.interceptors.request.use(config => {
// console.log("sessionStorage.token:", sessionStorage.token);
// Do something before request is sent
// if (store.getters.token) {
if (getToken()) {
config.headers.Authorization = getToken(); // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行编辑
// 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行编辑
} else {
config.headers.Authorization = 'Basic emhpbmVuZ3d1bGlhbndhbmc6emhpbmVuZ3d1bGlhbndhbmc='; // 增加客户端认证
}
// 将请求的接口添加到数组中
config.cancelToken = new axios.CancelToken(cancel => {
window._axiosPromiseArr.push({ cancel, id: config.id});
});
// console.log("request_config:", config);
return config
}, error => {
// Do something with request error
Promise.reject(error)
});
// respone拦截器
service.interceptors.response.use(
response => {
/**
* 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/
// console.log("respose:", response);
const res = response.data;
if (response.status !== 200) {
/* Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject('error');*/
console.log(res.message)
} else {
return response
}
},
error => {
const response = error.response;
if (response === undefined) {
/* Message({
message: '服务请求超时!',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
*/
// console.warn('服务请求超时!');
}
}
需要拦截的逻辑代码中写入
//遍历数组中的接口,删除请求
try {
window._axiosPromiseArr.forEach((ele, index) => {
// console.log("ele:", ele);
ele.cancel(); // 路由跳转之前,清空(终止)上一个页面正在请求的内容
// 清空请求的参数 清空请求的参数
delete window._axiosPromiseArr[index];
});
}
catch (e) {
console.log(e)
}