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使用Axios做ajax请求详解
  • Vue.js实战之使用Vuex + axios发送请求详解
  • vue axios同步请求解决方案
  • 解决vue处理axios post请求传参的问题
赞 (0)

相关推荐

  • 解决vue处理axios post请求传参的问题

    很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

  • vue使用Axios做ajax请求详解

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • vue axios同步请求解决方案

    vue axios同步请求解决方案

    在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求 解决方案 目前没有发现axios可以同步请求,所以只能使用jQuery,配置同步请求: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:false, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json'

  • 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 C

  • VUE的tab页面切换的四种方法

    VUE的tab页面切换的四种方法

    1.静态实现方法: 效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • vue监听路由变化时watch方法会执行多次的原因及解决

    目录 需求描述: 需求解析: 解决需求 问题解决 本人前端菜鸟一名,一直致力于不间断的生产管理后台的bug,并以此自勉自励.近几天接到一个需求,网上也搜了很多例子,但是没有从根本上解决.在这里记录一下我自己的解决的过程,这也是第一次在掘金发言,求轻虐. 需求描述: 有A.B两个页面,需要将A页面的orderId用路由传参的方式传入到B页面执行数据关联查询,然后显示在B页面 需求解析: 如果是你,你拿到这个需求,应该很容易想到在B页面对路由变化做watch,然后获取参数执行查询数据的方法完事. 解

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • C# PDF Page操作设置页面切换按钮的方法

    概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者最后一页,另一种是设置按钮跳转到指定页面.两种方法适应不同的程序设计需要,可自行选择合适的添加方法. 说明 这里的代码示例需要使用类库Spire.PDF for .NET,版本4.0 .在使用该类库时,在项目程序中引用Spire.Pdf.dll即可(dll文件在安装路径下的Bin文件中获取). 如: 代码操作示例(供参考) 1.跳转至特定页(首页.下

  • Vue刷新修改页面中数据的方法

    因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初始化代码: <script type="text/javascript" charset="utf-8"> mui.init(); var data = { dx:

  • Vue+axios实现统一接口管理的方法

    通过axios请求接口已经很简单了,但最近在做一个vue项目,想着把axios请求再封装一下,这样api就可以只在一处配置成方法,在使用的时候直接调用这个方法. 但咱们不用每个接口都定义成一个啰嗦的axios请求方法,既然是想简单点,就尽量只在一处完成简单的配置. 1.配置api接口 将同一模块的接口放在一个文件下,比如我在src的services下定义了一个global.js作为全局服务的配置,在它里面配置的api可以作为这个服务的方法. 比如: name字段将作为之后被调用的方法名,但这个只

  • Vue中实现回车键切换焦点的方法

    几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中,大多都有这种操作习惯.习惯把保存成为编辑,习惯用回车替换 Tab.这是受到微软 excel 荼毒的结果. 起初我以为这个功能很简单,无非就是把 Enter 键的功能转接到 Tab 键上面,分分钟就可以解决掉的问题. 可困难马上就出现了,我发现这条路是走不通的. 我们经常可以主动触发某个事件,比如 e

  • vue项目实现页面跳转的方法

    vue项目实现页面跳转的方法

    目录 1.创建一个vue-cli默认项目(仅包含babel) 2.进入创建文件 3.检查配置 4.创建views文件夹 5.设置APP.vue 6.进行main.js的配置 7.运行结果 问题描述: vue-router是前端开发中用来实现路由页面跳转的一个模块.下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转. 实验结果与讨论 : 1.创建一个vue-cli默认项目(仅包含babel) 2.进入创建文件 以管理员身份进入创建的文件路径内,并运行命令npm instal

随机推荐