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 showModalDialog参数的使用详解
Jan 07 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
JS实现普通轮播图特效
Jan 01 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
使用php来实现网络服务
2009/09/15 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
python中比较两个列表的实例方法
2019/07/04 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
应届生煤化工求职信
2013/10/21 职场文书
大学毕业感言
2014/01/10 职场文书
小学教师办公室制度
2014/02/03 职场文书
六一儿童节主持词
2014/03/21 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
会议欢迎词范文
2015/01/27 职场文书
主持稿开场白
2015/06/01 职场文书
环保建议书作文400字
2015/09/14 职场文书
会议主持词通用版
2019/04/02 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers