热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

下面小编就为大家分享一篇vueaxios在页面切换时中断请求方法ajax,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

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) => { 
 Vue.prototype.cancelAjax()  
 next(); 
}); 

调用post

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


推荐阅读
  • (转载请注明出处:http:blog.csdn.netbuptgshengod)1.背景      在android源码中我们能看到各种以@开头的字符,他们大多出现在注释中 ... [详细]
  • CGPathAddArc & CGPathAddArcToPoint
    CGPathAddArc&CGPathAddArcToPoint参考:http:blog.csdn.netxcysuccess3articledetails24001571CGPa ... [详细]
  • 1. 计算机网络概念
    计算机网络本章结构图本章主要列举概念,提前了解名词,后续会详细的解释。计算机网络概念计算机网络是一个分散的(不是集中的),具有独立功能的(互不影响)计算机系统(其中,这里所说的计算 ... [详细]
  • 1.前言最近因项目需求,需要把员工的工作组返回给前台,但是数据库是把员工的工作组Id,都存在一个字段内了(以“逗号”分隔),而这样不符合前台的需要,他们需要一行,一行的数据。如 ... [详细]
  • Java入门程序开发
    Java入门程序开发作者:尹正杰版权声明:原创作品,谢绝转载!否则将 ... [详细]
  • IhaveaPickerViewandIwanttoinitializeitwithintegervalues.ForexamplePickerViewwithall ... [详细]
  • 分享一下最近写的ReactNative的SSHSFTP组件,iOS端封装了NMSSH,Android端封装了JSch。支持SSH执行命令、实时Shell ... [详细]
  • 题意翻译题目大意:给定一个n(n ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了html不邮寄相关的知识,希望对你有一定的参考价值。 ... [详细]
  • #B.BalancedBreakdown#####1.题目大意:给定一个n,从n中不断分离回文数(翻转后大小相同的数字)问最少需要多少步,输出最少步数以及一种方案(方案不唯一)## ... [详细]
  • 水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人盛爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。予谓菊,花之隐逸 ... [详细]
  • packagecom.pt.utils;importio.netty.bootstrap.Bootstrap;importio.netty.channel.ChannelFuture;imp ... [详细]
  • 请在电脑上打开以下链接进行下载w3cschool离线版(chm):http:pan.baidu.coms1bniwRCV(最新,2014年10月21日更新)w3cschool离线版(ht ... [详细]
  • Win7操作系统建立无线虚拟wifi
    网络适配器中的microsoftvirtualwifiminiportadapter是windows7的隐藏功能,虚拟wifi。正确的运用这个功能,就可以把电脑当做路由器了。注 ... [详细]
  • C++中没有提供string类型的大小写转换,今天写了一下,方法很多#include<iostream>#include<string>#inclu ... [详细]
author-avatar
袁立红第_593
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有