https://github.com/axios/axio...

beforeRouteLeave。
將所有的當(dāng)前請(qǐng)求組織一個(gè)list放在this里，然后在離開(kāi)路由的時(shí)候cancel即可

在每個(gè)組件的beforeDestoy生命周期中執(zhí)行噶

模式錯(cuò)了，不應(yīng)該這樣的。你可以寫(xiě)一個(gè)mixin

beforeDestory() {
  this.cancel() // 在組件內(nèi)
}

要取消請(qǐng)求的話，肯定要記錄你當(dāng)前的所有請(qǐng)求

// 添加請(qǐng)求攔截器
axios.interceptors.request.use(
    config => {
        // 記錄該條請(qǐng)求，我用的是url,你可以用其他
        const url = config.url;
        // 把cancel放在axios.list[url]下面
        config.cancelToken = new axios.CancelToken(cancel => axios.list[url] = { cancel });
        return config;
    },
    error => Promise.reject(error)
);

//然后可以在其他地方，遍歷axios.list,調(diào)用list里面的cancel就可以取消當(dāng)前所有請(qǐng)求
for(let key in axios.list){
    axios.list[key].cancel();
    //順手刪除
    delete axios.list[key];
}

難點(diǎn)就是怎么在組件里拿到cancel，
那就利用函數(shù)的形參是對(duì)象的話，函數(shù)內(nèi)部改變對(duì)象屬性會(huì)影響到實(shí)參，
這樣的話 在base里面改變對(duì)象之后，組件調(diào)用api時(shí)傳過(guò)去的對(duì)象也會(huì)被改變，

我有做過(guò)類似的，但是我看你封裝的axios跟我的不大一樣，而且也看不出你是怎么使用instance的，我就把我的思路告訴你把

頁(yè)面組件調(diào)用的地方：

this.$api.getInfo(params, this.cancel)    //    cancel = {}

接口：

getInfo(params, cancel) {
    return base(params, cancel)    
}

base:
拿到cancel這個(gè)對(duì)象，然后給這個(gè)空對(duì)象添加一個(gè)屬性cancel，值是可終止請(qǐng)求的函數(shù)體
省略了很多，只有個(gè)大致思路

export const base = (params, cancel,.....) => {
    let config = {....}
    config.cancelToken = new CancelToken(function executor(c) {
      cancel.cancel = c;
    })
    
    return axios(config)
}