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 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
phpmyadmin操作流程
2006/10/09 PHP
composer.lock文件的作用
2016/02/03 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
Script的加载方法小结
2011/01/12 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
科级干部考察材料
2014/02/15 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
小组名称和口号
2014/06/09 职场文书
管理失职检讨书
2015/05/05 职场文书
新郎结婚感言
2015/07/31 职场文书
解除租赁合同协议书
2016/03/21 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技