vue 断开正在发送的请求_vue切换页面取消未完成接口请求

当vue切换页面时，尚未完成的接口由于异步原因，会造成报错等等问题，那么这时需要去取消这些接口的执行

首先思路：

页面A请求接口axios1 -->

axios创建CancelToken对象保存请求至store变量CancelTokenArr -->

当切换至页面B -->

进入全局路由守卫调用vuex的清除CancelTokenArr方法 -->

遍历CancelTokenArr清除

涉及的库

axios

vuex

vue-router

++axios++

import store from '../store'

let cancelTokenArr=[] //储存cancel token

// request拦截器

service.interceptors.request.use(

config => {

if (store.getters.token) {

config.headers['X-Token'] = getToken()

// 在发送请求设置cancel token

config.cancelToken = new axios.CancelToken(cancel => {

store.commit('PUSH_CANCEL', {

cancelToken: cancel

})

})

}

return config

},