vue页面切换中断ajax请求

项目中遇到个问题,客户端要等服务端操作3到4秒后才能返回结果,这时候用户退出页面ajax请求还在进行,会影响性能。
axios中提供了两种方式解决中断ajax问题,这里我就说我用的这种。

在main.js中加入以下代码;

Vue.prototype.$http= axios;
const CancelToken = axios.CancelToken;
let cancel;

Vue.prototype.$ajax = (type, url, data) => {
    return new Promise((resolve, reject) => {   //封装ajax
        var aa = {
            method: type,
            url: url,
            headers: { 'token': sessionStorage.getItem('token') },
            cancelToken: new CancelToken(c => {  //强行中断请求要用到的
                cancel = c
            })
        }
        var json = (type == 'get') ? Object.assign(aa, { params: data }) : Object.assign(aa, { data: data });
        var ajax = Vue.prototype.$http(json).then(res => {
            if (Object.is(res.data.code,200)) {
                resolve(res.data);
            } else {
                Vue.prototype.$message.error(res.data.msg);
            }
        }).catch(error => {   //中断请求和请求出错的处理
                if (error.message == "interrupt") {
                    console.log('已中断请求');
                    return;
                } else {
                    Vue.prototype.$message.error(res.data.msg);
                }
            })
        return ajax;
    })
};


router.beforeEach((to, from, next) => {   //路由切换检测是否强行中断,
	if(cancel){        //强行中断时才向下执行
		cancel('interrupt');   //给个标志,中断请求
	}
	next();	
});

页面中调用,不需要catch了。

         this.post(Url,{

			}).then(res=>{
			
			})

如果操作成功的话,应该是这样的
在这里插入图片描述

没有更多推荐了,返回首页