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

相关推荐
多恩Stone18 小时前
【C++ debug】在 VS Code 中无 Attach 调试 Python 调用的 C++ 扩展
开发语言·c++·python
PingdiGuo_guo19 小时前
C++联合体详解!
开发语言·c++
全栈老石19 小时前
手写一个无限画布 #1:坐标系的谎言
前端·canvas
XW010599919 小时前
4-11判断素数
前端·python·算法·素数
J2虾虾19 小时前
Spring Boot中使用@Scheduled做定时任务
java·前端·spring boot
Heo19 小时前
深入React19任务调度器Scheduler
前端·javascript·面试
一枚前端小姐姐19 小时前
Vue3 + Pinia 状态管理,从入门到模块化
前端·vue.js
boooooooom19 小时前
Vue3 nextTick 实现大变化:微任务优先,彻底搞懂渲染时机!
javascript·vue.js·面试
用户144361834009719 小时前
你不知道的JS上-(九)
前端·javascript
浅念-19 小时前
C++ 继承
开发语言·c++·经验分享·笔记·学习·算法·继承