axios全局封装取消请求,你可以创建一个 Axios 实例,并为该实例配置默认的 CancelToken

js 复制代码
import axios from 'axios';  
  
// Axios 的 CancelToken  
const CancelToken = axios.CancelToken;  
  
// 创建一个 Axios 实例  
const instance = axios.create();  
  
// 用于存储所有的 cancel 函数  
const pendingRequests = new Set();  
  
// 添加请求配置  
instance.interceptors.request.use(config => {  
  // 为每个请求创建一个新的 cancelSource  
  const cancelSource = CancelToken.source();  
  pendingRequests.add(cancelSource.cancel);  
  config.cancelToken = cancelSource.token;  
  return config;  
});  
  
// 提供一个取消所有请求的方法  
instance.cancelAll = () => {  
  pendingRequests.forEach(cancel => cancel());  
  pendingRequests.clear();  
};  
  
export default instance;

可以在你的应用中使用这个封装过的 Axios 实例,并通过调用 instance.cancelAll() 方法来取消所有未完成的请求。

相关推荐
Albart57514 小时前
Python 实战教程:用 30 分钟学会解决真实问题
开发语言·python
小蜜蜂dry14 小时前
nestjs实战-权限二:角色模块
前端·后端·nestjs
rm10914 小时前
【js逆向】webpack自吐算法记录
javascript
AskHarries14 小时前
权限模型:Shell、Browser、文件读写的安全边界
服务器·前端·网络
小蜜蜂dry14 小时前
nestjs实战-权限一: 菜单模块
前端·后端·nestjs
2301_7736436214 小时前
ceph池
开发语言·ceph·python
两年半的个人练习生^_^14 小时前
JMM 进阶:彻底理解 CAS 实现原理
java·开发语言
用户58124415415714 小时前
GemDesign MCP协议详解:从原型到代码的完整技术链路
前端
半个烧饼不加肉14 小时前
JS 底层探究-- 事件循环
开发语言·前端·javascript
goDeep15 小时前
useMemo 和 useCallback 的区别,我终于搞懂了
前端