vue 使用axios在跳转下一页面前取消所有请求

const CANCEL_TOKEN = axios.CancelToken;

Vue.prototype.$httpRequestList = [];	//管理所有请求中断方法的集合

axios({
    
    
    url: url,
    methods: 'POST',
    data: options,
    cancelToken: new CANCEL_TOKEN(c => {
    
     		
        Vue.prototype.$httpRequestList.push(c);	//中断请求时,将对应中断方法存进集合
      })
}).then(res => {
    
    }).catch(err => {
    
    
  if (err.message == "interrupt") {
    
    
       console.log('已中断请求');
        return;
      }
})
/**
* 使用路由守卫,在切换页面前中断上一个页面的所有请求
*/
router.beforeEach((to, from, next) => {
    
       
  if(Vue.$httpRequestList.length>0){
    
          //检查是否有需要中断的请求
      Vue.$httpRequestList.forEach(item=>{
    
    //遍历,执行中断方法并传入中断信息
          item('interrupt');	
      })
  }
  next();
});

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/115029265