之前遇到的一个问题做个记录。
问题
需求：在切换页面的时候，需要中断上一页还未响应的请求。
思路
解决思路：axios的CancelToken可以用来取消请求。
把每个请求的CancelToken都挂到Vue上面，在切换路由前，逐个调用，取消请求
方法实现
request.js(axios的封装)
service.interceptors.request.use(
config => {
if (sessionStorage.getItem('access_token')) {
// 让每个请求携带token-- ['Authorization']为自定义key 请根据实际情况自行修改
config.headers['Authorization'] = 'Bearer ' + sessionStorage.getItem('access_token');
}
//强行中断请求要用到的
config.cancelToken = new CancelToken(c => {
Vue.$httpRequestList.push(c);
})
return config
},
error => {
// for debug
console.log(error)
if (error.message == "interrupt") {
console.log('已中断请求');
return;
} else {
return Promise.reject(error)
}
}
)
main.js
//路由切换检测是否强行中断，
router.beforeEach((to, from, next) => {
//强行中断时才向下执行
if(Vue.$httpRequestList.length>0){
Vue.$httpRequestList.forEach(item=>{
//给个标志，中断请求
item('interrupt');
})
}
next();
});