當(dāng)vue切換頁面時(shí)吧史，尚未完成的接口由于異步原因观游，會(huì)造成報(bào)錯(cuò)等等問題，那么這時(shí)需要去取消這些接口的執(zhí)行
首先思路：
頁面A請(qǐng)求接口axios1 -->
axios創(chuàng)建CancelToken對(duì)象保存請(qǐng)求至store變量CancelTokenArr -->
當(dāng)切換至頁面B -->
進(jìn)入全局路由守衛(wèi)調(diào)用vuex的清除CancelTokenArr方法 -->
遍歷CancelTokenArr清除
涉及的庫
- axios
- vuex
- vue-router
++axios++
import store from '../store'
let cancelTokenArr=[] //儲(chǔ)存cancel token
// request攔截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken()
// 在發(fā)送請(qǐng)求設(shè)置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('路由跳轉(zhuǎn)取消請(qǐng)求');
});
cancelTokenArr = [];
}
}
}
export default user
++router++
import store from './store'
router.beforeEach((to, from, next) => {
store.commit('CLAER_CANCEL'); // 取消請(qǐng)求
next()
})
