标签: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(); });
标签:OLE 直接 prototype 页面 sig bsp 实例 rup outer
原文地址:https://www.cnblogs.com/web520/p/10717631.html