axios的请求与取消

最新推荐文章于 2025-03-15 21:09:02 发布

ymlvtimi

最新推荐文章于 2025-03-15 21:09:02 发布

阅读量1k

点赞数

分类专栏： jsp的小知识

本文链接：https://blog.youkuaiyun.com/ymlvtimi/article/details/89185761

版权

jsp的小知识专栏收录该内容

10 篇文章

订阅专栏

本文探讨了axios中请求取消的机制，指出它实际上并非真正意义上的取消请求，而是通过在响应时标记为Cancel。在前端会看到两次输出，而后台可能会有多次处理。建议在请求成功或非取消的失败后移除cancelTag，以避免资源浪费。通过模拟网络延迟，可以更深入理解这一行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还可以做进一步优化：
1、装载所有的请求中数据，初始化为 [] 空数组，
2、在push时，push({'url':***,'cancel':cancelToken})
		//像这样存入，当前请求的url和当前的取消方法，形成映射
3、在执行某个改变原始数据源的请求时，为防止前一个还在运行但尚未完成的请求的影响，可以根据
	当前url去所有请求未完成的集合中找到它并取消请求，然后从集合中移除该信息

*测试发现，这里的取消，并不是取消请求：因为请求已经发出了，服务器也已经在处理，只是回传消息的时候打上了标记，因此在catch模块输出Cancel

1、前台输出2次
在这里插入图片描述
2、后台输出多次
后台记录
欢迎大家去验证：后台加个Thread.sleep(3000);，可以模拟网络延迟

var vm=new Vue({
	el:"#div_id",
	data:{
		cancelTag:[],   //装所有的想要准备移除的请求，用处：当你离开这个页面时，将取消这个页面发出	的未完成的所有请求
		cancelCurrentTag:null,   //放置的是前一个单独的请求，用处：有时只想对某一个可能未完成的请求，让它取消
		
	},
	methods:{
		post:function(){  //post请求
			var CancelToken = axios.CancelToken;  //这里不写，下面new对象那里会报空
			axios({
				headers: {
      				'Content-Type': 'application/json'
    			},
    			transformRequest: [function(data) {   //请求之前，对数据做处理
      				data = JSON.stringify(data)
      				return data
    			}],
    			timeout:5000,
    			url: '***',
    			method: 'post',
    			//params: {},
    			data: {
      				'code': 123,                      //传的参数
      				'data': "***"
    			},
    			// “cancelToken”指定可用于取消请求的取消令牌
  				cancelToken: new CancelToken(function (cancel) {
  					vm.cancelCurrentTag=cancel;
  					vm.cancelTag.push(cancel);  //动态放入
  				})
			}).then(function(res){   //想打出全部数据，可以使用console.log(JSON.stringify(err))，不会会显示object对象，而无法查看具体数据
				console.log("请求数据:"+res.data)
			}).catch(function(err){
				if(err!="Cancel"){  //非代码取消请求造成的异常，才输出显示
					console.log("请求异常:"+err)
				}
			})
		},
		cancelAll:function(){   //取消之前的全部请求
			$.each(this.cancelTag,function(i,item){
				console.log("执行了")
				item();
			})
			this.cancelTag=[];   //取消完之后，再清空记录
		},
		cancel:function(){
			console.log("执行")
			var j=-1;
			this.cancelCurrentTag();
			$.each(this.cancelTag,function(i,item){  //既然准备单独取消，就将总体中的该部分移去
				if(item==vm.cancelCurrentTag)j=i;
			})
			if(j!=-1)this.cancelTag.splice(j,1);
		}
	}
})

*此后，还应该在请求完成后的成功与非取消的失败中，移除该项cancelTag