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

相关推荐
仰泳之鹅1 分钟前
【杂谈】C语言中的链接属性、声明周期以及static关键字
java·c语言·前端
沐知全栈开发2 分钟前
SVG 文本:深入解析与高效应用
开发语言
2501_940315264 分钟前
【无标题】(leetcode933)最近的请求次数
java·前端·javascript
张丶大帅6 分钟前
【走进Golang】
开发语言·后端·golang
Sheep Shaun8 分钟前
深入理解红黑树:从概念到完整C++实现详解
java·开发语言·数据结构·c++·b树·算法
楼田莉子10 分钟前
CMake学习:入门及其下载配置
开发语言·c++·vscode·后端·学习
每天吃饭的羊16 分钟前
LeetCode 第一题
前端
Ahtacca16 分钟前
拒绝重复造轮子:利用自定义注解封装POI,实现Java通用Excel解析
java·javascript·vue·excel
入门级前端开发17 分钟前
vue集成xlsl实现前端表格导入导出
前端·javascript·vue.js
2501_9445215921 分钟前
Flutter for OpenHarmony 微动漫App实战:列表项组件实现
android·开发语言·javascript·flutter·ecmascript