vue跳转路由前清空之前所有请求？

Question

如题，项目是vue-cli单页面应用，所以即使在跳转路由，上一个页面的请求也不会停止，这样会产生一系列问题。。。
在axios的官方文档发现了取消请求的方法，于是我就动手在我封装的axios里面试了试，没有成功，求指教

如图：我在base.js里创建了axios的实例，并且配置了canceltoken

问：我现在想要在每次跳转路由前调用cancel方法应该怎么弄（我的beforeEach在main.js中）

Answer 1

在每个组件的beforeDestoy生命周期中执行噶

Answer 2

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

Answer 3

模式错了，不应该这样的。你可以写一个mixin

beforeDestory() {
  this.cancel() // 在组件内
}

Answer 4

beforeRouteLeave。
将所有的当前请求组织一个list放在this里，然后在离开路由的时候cancel即可

Answer 5

难点就是怎么在组件里拿到cancel，
那就利用函数的形参是对象的话，函数内部改变对象属性会影响到实参，
这样的话 在base里面改变对象之后，组件调用api时传过去的对象也会被改变，

我有做过类似的，但是我看你封装的axios跟我的不大一样，而且也看不出你是怎么使用instance的，我就把我的思路告诉你把

页面组件调用的地方：

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

接口：

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

base:
拿到cancel这个对象，然后给这个空对象添加一个属性cancel，值是可终止请求的函数体
省略了很多，只有个大致思路

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

Answer 6

要取消请求的话，肯定要记录你当前的所有请求

// 添加请求拦截器
axios.interceptors.request.use(
    config => {
        // 记录该条请求，我用的是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,调用list里面的cancel就可以取消当前所有请求
for(let key in axios.list){
    axios.list[key].cancel();
    //顺手删除
    delete axios.list[key];
}