vue axios 在页面切换时中断请求方法 ajax


Posted in Javascript onMarch 05, 2018

如下所示:

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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
node.js通过axios实现网络请求的方法
Mar 05 #Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 #Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 #Javascript
解决vue处理axios post请求传参的问题
Mar 05 #Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 #Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 #Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 #Javascript
You might like
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
js插件实现图片滑动验证码
2020/09/29 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python静态方法实例
2015/01/14 Python
Python 基础教程之包和类的用法
2017/02/23 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Python实现搜索算法的实例代码
2020/01/02 Python
python3中确保枚举值代码分析
2020/12/02 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
小学生通知书评语
2014/12/31 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书