最近做項(xiàng)目遇到一個(gè)需求，需要在切換路由時(shí)，取消當(dāng)前所有未完成的請求攀操，隱約記得axios中有cancelToken這么一個(gè)東東（https://github.com/axios/axios）金矛，二話不說就是干，axios文檔如下：
從文檔中可知失驶，有兩種取消請求的方法土居，另外還聲明可以使用同一個(gè)cancel token取消多個(gè)請求。于是我就照貓畫虎，寫出下列代碼：
// 配置請求
const CancelToken = axios.CancelToken
const source = CancelToken.source()
store.requestCancel = source.cancel // 保存到全局變量擦耀，用于路由切換時(shí)調(diào)用
const http = axios.create({
cancelToken: source.token
})
// 路由切換
router.beforeEach((to, from, next) => {
store.requestCancel && store.requestCancel()
next()
})
心里想著棉圈，每個(gè)請求都會帶上cancelToken，每次切換路由時(shí)眷蜓，在跳轉(zhuǎn)前執(zhí)行取消請求的操作迄损，完美！账磺！crtl+s芹敌， npm start，切換路由垮抗，what氏捞？？冒版？切換后的頁面請求怎么拿不到數(shù)據(jù)液茎？各種debugger一調(diào)，怎么切換路由后的請求response都沒有執(zhí)行辞嗡，直接就到catch了捆等？打開Network，顯示請求也沒有發(fā)送续室，難道執(zhí)行了cancel函數(shù)后栋烤，所有的請求都不發(fā)送了嗎？查看axios源碼發(fā)現(xiàn)挺狰，在lib/adapters/http.js中存在一段代碼如下：
if (config.cancelToken) {
config.cancelToken.promise.then(functiion onCanceled(cancel) {
if (aborted) {
return;
}
req.abort();
reject(cancel);
aborted = true
});
}
大致的意思就是說如果請求的配置中存在cancelToken明郭，并且該cancelToken中存在promise的話就執(zhí)行then方法，由于在上述代碼中丰泊，在切換路由前執(zhí)行了source.cancel方法薯定，并且在所有的請求中配置的是同一個(gè)cancelToken，所以在之后的所有請求都會直接執(zhí)行onCanceled方法瞳购，從而abort請求话侄。
知道了緣由，接下來的工作就很簡單啦学赛，直接上修改后的代碼：
// 配置發(fā)送請求攔截器
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
}
}
先后的變化就是每次路由變化前年堆，執(zhí)行cancel方法并且更新cancelToken。
初次寫文章罢屈，請多指教｀秩汀！
