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

相关推荐
ganshenml10 分钟前
sed 流编辑器在前端部署中的作用
前端·编辑器
虚伪的空想家36 分钟前
arm架构服务器使用kvm创建虚机报错,romfile “efi-virtio.rom“ is empty
linux·运维·服务器·javascript·arm开发·云原生·kvm
0***K8921 小时前
Vue数据挖掘开发
前端·javascript·vue.js
蓝胖子的多啦A梦1 小时前
ElementUI表格错位修复技巧
前端·css·vue.js·el-table表格错位
6***37941 小时前
Java安全
java·开发语言·安全
_OP_CHEN1 小时前
前端开发实战深度解析:(一)认识前端和 HTML 与开发环境的搭建
前端·vscode·html·web开发·前端开发
Irene19911 小时前
ES6 export 语句 语法规范
javascript·es6·export
xiAo_Ju1 小时前
iOS一个Fancy UI的Tricky实现
前端·ios
豐儀麟阁贵1 小时前
8.1 异常概述
java·开发语言
H***99761 小时前
Vue深度学习实战
前端·javascript·vue.js