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移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
Vue数据绑定实例写法
Aug 06 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
php实现下载限制速度示例分享
2014/02/13 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python文件与目录操作实例详解
2016/02/22 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
ipad上运行python的方法步骤
2019/10/12 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
打架检讨书300字
2014/02/02 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
行政助理岗位职责
2015/02/10 职场文书
出国留学自荐信模板
2015/03/06 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js