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 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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
虫族 ZERG 概述
2020/03/14 星际争霸
PHP中一个控制字符串输出的函数
2006/10/09 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
关于php中一些字符串总结
2016/05/05 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
怎样声明接口
2014/09/19 面试题
一道写SQL的面试题和答案
2013/11/19 面试题
中学家长会邀请函
2014/02/03 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
医学专业大学生求职信
2014/07/12 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
会议通知格式范文
2015/04/15 职场文书
故意伤害辩护词
2015/05/21 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS