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

相关推荐
我不吃饼干12 小时前
TypeScript 类型体操练习笔记(二)
前端·typescript
大闲在人12 小时前
C、C++区别还是蛮大的
c语言·开发语言·c++
光影少年12 小时前
浏览器渲染原理?
前端·javascript·前端框架
小白探索世界欧耶!~13 小时前
Vue2项目引入sortablejs实现表格行拖曳排序
前端·javascript·vue.js·经验分享·elementui·html·echarts
Cosmoshhhyyy13 小时前
《Effective Java》解读第39条:注解优先于命名模式
java·开发语言
清水白石00814 小时前
Python 纯函数编程:从理念到实战的完整指南
开发语言·python
掘根14 小时前
【C++STL】平衡二叉树(AVL树)
开发语言·数据结构·c++
叫我一声阿雷吧14 小时前
JS实现响应式导航栏(移动端汉堡菜单)|适配多端+无缝交互【附完整源码】
开发语言·javascript·交互
GISer_Jing14 小时前
前端营销(AIGC II)
前端·react.js·aigc