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

 更新时间:2018年03月05日 16:47:59   作者:qq_25186543  
下面小编就为大家分享一篇vue axios 在页面切换时中断请求方法 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) => { 
<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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    这篇文章主要介绍了vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决方案,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-09-09
  • Element框架el-tab点击标签页时再渲染问题的解决

    Element框架el-tab点击标签页时再渲染问题的解决

    本文主要介绍了Element框架el-tab点击标签页时再渲染问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Vue基本使用之对象提供的属性功能

    Vue基本使用之对象提供的属性功能

    这篇文章主要介绍了Vue基本使用之对象提供的属性功能实例详解,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • 一文详解Vue3组件通信轻松玩转复杂数据流

    一文详解Vue3组件通信轻松玩转复杂数据流

    在大型Vue项目中,组件通信如同神经网络般贯穿整个应用,这篇文章将为大家详细介绍一下Vue3中的组件通信方式,有需要的小伙伴可以了解下
    2025-02-02
  • Vue中的 mixins 和 provide/inject详解

    Vue中的 mixins 和 provide/inject详解

    这篇文章主要介绍了Vue中的 mixins 和 provide/inject详解,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue构建单页面应用实战

    vue构建单页面应用实战

    本篇文章主要介绍了vue构建单页面应用实战,使用 SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验。
    2017-04-04
  • vue3封装echarts组件最佳形式详解

    vue3封装echarts组件最佳形式详解

    这篇文章主要为大家介绍了vue3封装echarts组件最佳形式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue3 teleport的使用案例详解

    vue3 teleport的使用案例详解

    这篇文章主要介绍了vue3 teleport的使用demo,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • vue中的localStorage使用方法详解

    vue中的localStorage使用方法详解

    在Vue项目中可以直接使用localStorage,它支持Vue2和Vue3,在Vue2中,可以通过`localStorage.setItem()`、`localStorage.getItem()`和`localStorage.removeItem()`来保存、读取和删除数据,本文给大家介绍vue中的localStorage使用详解,感兴趣的朋友一起看看吧
    2025-03-03
  • Vue3项目中env文件的配置和使用指南

    Vue3项目中env文件的配置和使用指南

    在现代前端开发中,项目通常需要在不同的环境中运行,例如开发环境、测试环境和生产环境,每个环境可能需要不同的配置,通过使用 .env 文件,可以方便地管理这些环境变量,避免硬编码配置,本文给大家介绍了Vue3项目中env文件的配置指南,需要的朋友可以参考下
    2025-03-03

最新评论