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

相关推荐
零基础的修炼9 分钟前
Linux---序列化与反序列化
java·开发语言
向日葵同志4433010 分钟前
使用@univerjs纯前端渲染excel, 显示图片、链接、样式
前端·react.js·excel
敲代码的嘎仔16 分钟前
JavaWeb零基础学习Day6——JDBC
java·开发语言·sql·学习·spring·单元测试·maven
闭着眼睛学算法17 分钟前
【双机位A卷】华为OD笔试之【排序】双机位A-银行插队【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·javascript·c++·python·算法·华为od
可别39022 分钟前
使用Worker打包报错
前端·vue.js
Drift_Dream22 分钟前
深入浅出 requestAnimationFrame:让动画更流畅的利器
javascript
GIS瞧葩菜26 分钟前
【无标题】
开发语言·前端·javascript·cesium
T___T32 分钟前
彻底搞懂 CSS 盒子模型 box-sizing:小白也能看懂的布局核心
前端·面试
彭于晏爱编程35 分钟前
关于表单,别做工具库舔狗
前端·javascript·面试
空白格9735 分钟前
Android插件化开发
前端