Axios取消接口请求、取消重复请求

最新推荐文章于 2024-06-14 20:14:28 发布

shuncheng_hu

最新推荐文章于 2024-06-14 20:14:28 发布

阅读量566

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/shuncheng_hu/article/details/122947124

版权

本文介绍了在JavaScript前端开发中，如何使用Axios库来取消特定接口请求，以及通过拦截器实现对pending状态中重复请求的判断和取消，以解决如上传文件取消、快速切换状态导致的重复请求等问题。

摘要由CSDN通过智能技术生成

场景：

上传文件取消
同一DOM节点不同数据快速切换，导致前一状态请求数组渲染到当前状态
取消多次重复请求等

取消某一接口请求

let cancel
getData () {
   
	const CancelToken = axios.CancelToken
	const source = CancelToken.source()
	axios.get('/api/test', {
   
  		cancelToken:  new CancelToken(executor(c) => {
   
	    	// executor 函数接收一个 cancel 函数作为参数
	    	cancel = c;
	 	})
	}).catch((thrown) => {
   
  		if (axios.isCancel(thrown)) {
   
    	console.log