vue路由变化时使用axios取消所有请求

Posted 2021-04-16 前端之阶

在项目中有这样的场景，一个菜单进去表格loading状态发送请求 此时请求处于pending状态 找个时候我们切换菜单，另一条请求也发出去了，找个时候之前的请求也完成了，就会出现你在另一个页面数据对不上 或者上条请求报错确在你找个页面发生，所以就找了一下解决办法。一开始我以为axios是没有取消请求这一东西得。想法时在请求接收或者失败的回调都进行router的判断，判断当前router是否和发请求前的一样来操作。后来还是找到axios官方时有一个函数来取消发送请求的cancelToken这函数。

具体用法。

 

http.interceptors.request.use(config => {

    config.cancelToken = store.source.token

    return config

}, err => {

    return Promise.reject(err)

})

 

router.beforeEach((to, from, next) => {

    const CancelToken = axios.CancelToken

    store.source.cancel && store.source.cancel()

    store.source = CancelToken.source()

    next()

})

 

// 全局变量

 

store = {

    source: {

        token: null,

        cancel: null

  }