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

相关推荐
To_OC12 小时前
从一头雾水到跑通全流程:我用一个周末啃透了JWT登录鉴权
前端·后端·http
2601_9628857212 小时前
如何用 Python 自动识别股票的支撑位与压力位?
开发语言·python
爱吃奥利奥_wen12 小时前
面向对象三板斧:封装、继承、多态,到底在“装“什么、“承“什么、“变“什么?
开发语言·经验分享·c#
我可能是个假开发12 小时前
FTP Unicode 文件名导致 `550` 的问题分析与解决方案
java·开发语言·spring
WL学习笔记13 小时前
日期类(C++)
开发语言·c++·日期类实现
excel13 小时前
研究 Vue 3 源码的收获
前端·vue.js
谢亮_vipxieliang14 小时前
Go map与结构体的正确使用
开发语言·golang·哈希算法
H.莓飛14 小时前
【C++】命名空间、缺省参数、函数重载与引用
linux·开发语言·c++·visual studio
xxwl58514 小时前
数据结构知识点和代码实现总结(C语言实现)
c语言·开发语言·数据结构
可乐鸡翅yeah_15 小时前
业务中 M3U8 水印相关坑,硬水印和动态水印区别
前端·网络·数据库·ffmpeg·m3u8在线