码迷,mamicode.com
首页 > 移动开发 > 详细

Vue切换页面时中断axios请求

时间:2019-04-16 16:35:09      阅读:659      评论:0      收藏:0      [点我收藏+]

标签:OLE   直接   prototype   页面   sig   bsp   实例   rup   outer   

在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页面的数据显示造成一定影响

所以我们应该,切换页面前中断前面所有请求

 

Vue.prototype.$http= axios;//Vue函数添加一个原型属性$axios 指向axios,这样vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了
const CancelToken = axios.CancelToken;
Vue.$httpRequestList=[];

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


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

 

Vue切换页面时中断axios请求

标签:OLE   直接   prototype   页面   sig   bsp   实例   rup   outer   

原文地址:https://www.cnblogs.com/web520/p/10717631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!