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 小时前
第10章 千团出世|《互联网产品恩仇录》
前端
非优秀程序员12 小时前
第11章 小高在对面|《互联网产品恩仇录》
前端
非优秀程序员12 小时前
第14章 只剩美团|《互联网产品恩仇录》
前端
非优秀程序员12 小时前
第09章 老乡何必为难老乡|《互联网产品恩仇录》
前端
非优秀程序员12 小时前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
非优秀程序员12 小时前
第03章 三大门户,烽烟起于瀛海威|《互联网产品恩仇录》
前端
沐晓时光13 小时前
C语言入门,内存函数知识讲解
c语言·开发语言
程序员大阳16 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
曦樂~16 小时前
【Web Development】02 CSS
前端·css
风骏时光牛马17 小时前
后端服务接口开发与数据逻辑处理
前端