vue axios 在页面切换时中断请求方法 ajax
如下所示：
Vue.prototype.$ajax=axios;
const CancelToken = axios.CancelToken;
let cancel;
let cancelAjaxText = '中断成功';
Vue.prototype.post = function(url,data,loading){
var ajax = Vue.prototype.$ajax({
method: 'post',
url:url,
data: data,
cancelToken: new CancelToken(c => { //强行中断请求要用到的
cancel = c
})
}).then(res =>res.data,res=>{ //中断请求和请求出错都会走这里，我这里用 cancelAjaxText 来区别
if(res.message == cancelAjaxText){
return {status : false,msg:cancelAjaxText}
}else{
this.$confirm('登录过时，是否重新登录', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
window.location.href = Vue.prototype.url_head + '/';
}).catch(() => {
});
}
})
return ajax;
};
接入 axios ,在POST方法里加入 cancelToken 数据，在上面else中，中断请求和请求出错都会走那里，所以用一个msg来识别(因为接口返回中也有一个msg，统一一下);
以下是 中断请求的方法,放在 路由切换的监听 router.beforeEach 中 ，cancel 是中断的方法，在post 的 cancelToken 里面拿出来的
Vue.prototype.cancelAjax = function(){ //切换页面强行中断请求 router.beforeEach中用到
if(cancel){
cancel(cancelAjaxText);
}
}
router.beforeEach((to, from, next) => {
<span style="white-space:pre;"> </span>Vue.prototype.cancelAjax()
next();
});
调用post
<span style="white-space:pre;"> </span>this.post(this.ajaxUrl + 'getCrTree',{
devAddr : this.changeData.devAddr,
innerId : this.changeData.innerId,
}).then(ret=>{
if(ret.status){
}else{
this.msg(ret.msg);
}
})
以上这篇vue axios 在页面切换时中断请求方法 ajax就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
MIP Page 最大的工作在于将多个独立的页面融合在一起，让它们拥有像单页应用 (SPA) 那样的切换效果和使用体验，解决“第二跳”的问题。这一部分简单讨论一下它的实现方案。 方案核心主要有以下几点： MIP Page 借助 iframe 实现了页面之间的互相隔离 通过 iframe 和外界的通讯来实现页面之间的通讯和传递数据 为了加载性能考虑，第一个页面维持原状，不放入 iframe 之中。
-
问题内容： 我在本周遇到的一种情况：我们有一个jQuery Ajax调用，该调用返回到服务器以获取数据 是页面上静态方法的链接（比如）。 这行得通，没问题。 一位同事试图用类型为“ GET”的电话代替此呼叫。它坏了，我不得不修复它。最终，我回到了POST，因为我们需要快速修复，但是它一直困扰着我，因为在这种情况下，从语义上来说GET更“正确”。 据我了解，jQuery将数据中的对象转换为查询字符串
-
本文向大家介绍jQueryMobile之Helloworld与页面切换的方法，包括了jQueryMobile之Helloworld与页面切换的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下： jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主
-
移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示Loading状态缓解一下用户等待情绪就十分重要。 如果你使用vue-router和vuex，那么可以很容易实现。 首先，注册一个module来保存状态 const store = new Vuex.Store({}) // 这里你可能已经有其他 module store.registerModule('vux'
-
在其生命周期的各个阶段截取和修改请求的内容 进程: 主进程 WebRequest类的实例是通过使用 Session的 webRequest属性来访问。 每个 API 接收一可选的 filter 和 listener,当 API 事件发生的时候使用 listener(details) 调用 listener, details 是一个用来描述请求的对象.将 null作为 listener传递将取消订
-
本文向大家介绍iOS判断网络请求超时的方法，包括了iOS判断网络请求超时的方法的使用技巧和注意事项，需要的朋友参考一下 本文介绍了iOS判断网络请求超时的方法，代码具体如下： 打印 error 可见： po error.localizedDescription 请求超时。 po error.code -1001 所以使用 error.code是否等于 -1001 判断请求超时 以上就是
-
本文向大家介绍Nginx中404页面的配置及AJAX请求返回404页面的方法，包括了Nginx中404页面的配置及AJAX请求返回404页面的方法的使用技巧和注意事项，需要的朋友参考一下 404页面基础配置 404错误是WWW网站访问容易出现的错误。最常见的出错提示：404 NOT FOUND。404错误页的设置对网站SEO有很大的影响，而设置不当，比如直接转跳主页等，会被搜索引擎降权拔毛。404
-
表页与里页 KAG 的每一层又可以分成两部分，表页 fore 、里页 back 。 所有表页的内容组成了画面上显示的东西，而里页的内容，画面上是看不到的。 里页主要是在使用[trans]（画面切换效果）之前，用于预载想要显示的内容的。（转自KAG官方文档汉化版） 如果将吉里吉里/KAG的所有层理解成一叠卡片的话，表页就是卡片当前朝向屏幕的一面。 那么，切换就是把所有的卡片翻面，让表页和里页互换。