axios 终止请求

项目中需要在请求拦截器中进行token的判断,如果token不存在就取消请求,并且跳转至登录页

感谢

​​https://blog.csdn.net/Crazy_GirlLL/article/details/126606503​​​

​​https://www.jianshu.com/p/79919aa6cf5a​​

官方文档说0.22以后就启用canceltoken这种方式了,目前我用的是0.18,所以还是用了这个

import axios from 'axios';
import {Message} from 'element-ui'
import router from '../router/index'
// 按照axios官方提示需要引入这两步
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
 
const instance = axios.create({
  baseURL: "http://xxx.xxx.xxx",
  timeout: 5000,
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
 
// 请求拦截器
instance.interceptors.request.use(config => {
  let tokenS = sessionStorage.getItem('token');
  let tokenL = localStorage.getItem('token');
  if (tokenS || tokenL) {
    config.headers['token'] = tokenS || tokenL;
  } else {
    if (config.url === '/order/shoppingCart') {
      // 当没有token时，取消本次请求
            let errorMsg = { msg: 'cancelCache' + Math.random(), data: [] }
            config.cancelToken = source.token
            // 这一行的作用是每次传递的errorMsg都是不一样的，如果没有这一行，那么，即使source.cancel(errorMsg)中有传递不同的参数，接收的时候也是一样的
            source.token.reason = errorMsg 
      // cancel函数可以不用传参，也可以传入取消后执行的操作，取消后可提示用户需要登录
            source.cancel(errorMsg)
      // 定时器1.5s后自动跳转到登录页
      setTimeout(() => {router.push('/login')}, 1500);
    }
  }
  return config;
}, err => {
  return Promise.reject(err);
})

官方推荐的新方式 abortcontroller

const controller = new AbortController();



axios.get('/user/12345', {
  signal: controller.signal
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  
})

controller.abort(); // 不支持 message 参数