当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
},
error => {
console.log(error) // for debug
Promise.reject(error)
}
)
++vuex++
const axios = {
state: {
cancelTokenArr: []
},
mutations: {
PUSH_CANCEL(state, payload){
state.cancelTokenArr.push(payload.cancelToken);
},
CLAER_CANCEL({cancelTokenArr}){
cancelTokenArr.forEach(item => {
item('路由跳转取消请求');
});
cancelTokenArr = [];
}
}
}
export default user
++router++
import store from './store'
router.beforeEach((to, from, next) => {
store.commit('CLAER_CANCEL'); // 取消请求
next()
})
