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

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

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

clipboard.png

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

回答:

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

回答:

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

回答:

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

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

回答:

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

回答:

难点就是怎么在组件里拿到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)
}

回答:

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

// 添加请求拦截器
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];
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注