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() 方法来取消所有未完成的请求。

相关推荐
liuyouzhang2 小时前
将基于Archery的web数据库审计查询平台封装为jdbc接口的可行性研究(基于AI)
前端·数据库
不吃香菜学java7 小时前
Redis的java客户端
java·开发语言·spring boot·redis·缓存
码事漫谈8 小时前
大模型输出的“隐性结构塌缩”问题及对策
前端·后端
贵沫末8 小时前
python——打包自己的库并安装
开发语言·windows·python
这儿有一堆花8 小时前
前端三件套真的落后了吗?揭开现代 Web 开发的底层逻辑
前端·javascript·css·html5
文祐8 小时前
C++类之虚函数表及其内存布局(一个子类继承一个父类)
开发语言·c++
.Cnn9 小时前
JavaScript 前端基础笔记(网页交互核心)
前端·javascript·笔记·交互
zuowei28899 小时前
华为网络设备配置文件备份与恢复(上传、下载、导出,导入)
开发语言·华为·php
醉酒的李白、9 小时前
Vue3 组件通信本质:Props 下发,Emits 回传
前端·javascript·vue.js
xiaohe079 小时前
超详细 Python 爬虫指南
开发语言·爬虫·python