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

相关推荐
大莲芒7 分钟前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
前端·javascript·react.js
byte轻骑兵8 分钟前
【C++进阶】关联容器:pair类型
开发语言·c++
Hellyc11 分钟前
SpringMVC响应数据:页面跳转与回写数据
java·前端·学习
LuckyRich119 分钟前
【boost搜索引擎】下
开发语言·c++·搜索引擎
CaveShao24 分钟前
前端开发中常见的 SEO 优化
前端·seo
兢兢业业的小白鼠1 小时前
Java高级JVM知识点记录,内存结构,垃圾回收,类文件结构,类加载器
java·开发语言·jvm·tomcat
Hyyy1 小时前
ElementPlus按需加载 + 配置中文避坑(干掉1MB冗余代码)
前端·javascript·面试
Niuguangshuo1 小时前
Python设计模式:代理模式
开发语言·python·代理模式
Summer_Xu1 小时前
模拟 Koa 中间件机制与洋葱模型
前端·设计模式·node.js
李鸿耀1 小时前
📦 Rollup
前端·rollup.js