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

在项目中有这样的场景，一个菜单进去表格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

}