场景

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

思路

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

实现

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

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

let axiosPromiseArr=[] //储存cancel tokenaxios.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，记录人生第一次[羞涩]