vue项目中路由切换时取消所有等待中的请求

场景

使用vue构建的app页面，切换路由时，存在卡顿现象。经分析，较大原因是，上个页面中的axios请求未结束，特别是某个存在多个请求的页面，会在该页面停留较长时间（所有请求结束）才会切换到目标页面。

思路

路由切换时取消所有未完成的axios请求。

实现

参照axios的api，可以使用cancel token来取消请求。

首先，为达到统一处理，在main.js中添加请求拦截器：

let axiosPromiseArr=[] //储存cancel token
axios.interceptors.request.use(function (config) {
    // 在发送请求设置cancel token
    config.cancelToken = new axios.CancelToken(cancel => {
        axiosPromiseArr.push({cancel})
    })
    return config;
}, function (error) {
    // 对请求错误的处理
    return Promise.reject(error);
});
复制代码

其次，路由切换时，取消axiosPromiseArr中所有未完成的请求，也是main.js：

router.beforeEach((to, from, next) => {
    axiosPromiseArr.forEach((ele, index) => {
        ele.cancel()
        delete axiosPromiseArr[index]
    })
}
复制代码

最后，添加响应拦截器（具体位置根据项目中，拦截器位置而定）：

axios.interceptors.response.use(response => {
    //请求成功时的处理
}, error => {
    //请求取消时，也会进入error，根据axios.isCancel()：true--请求取消  false--请求失败
    //仅在请求失败时做后续处理
    if(axios.isCancel(error)) {
        console.log('请求取消')
    }else {
        Toast({
            message: '连接服务器失败，请稍后再试！',
            duration: 2000,
            className: 'globalMsg'
        });
        return Promise.reject(error);
    }
});
复制代码

ps：第一次写文章，不足之处，请指正。顺便立个flag：2018年9月26日15:12:42，记录人生第一次[羞涩]