axios取消请求

1.使用CancelToken:

TypeScript 复制代码
class RequestHttp {
	service: AxiosInstance;
	public constructor(config: AxiosRequestConfig) {
		// 实例化axios
		this.service = axios.create(config);

		/**
		 * @description 请求拦截器
		 * 客户端发送请求 -> [请求拦截器] -> 服务器
		 */
		this.service.interceptors.request.use(
			(config: any) => {
				if (!getUrlParams("id")) {
					config["cancelToken"] = new axios.CancelToken(function (cancel) {
						cancel("当前URL中未携带id参数,请求已被取消");
					});
				}
				return config;
			},
			(error: AxiosError) => {
				return Promise.reject(error);
			}
		);
	}
}

export default new RequestHttp(config);

2.使用AbortController

javascript 复制代码
class RequestHttp {
	service: AxiosInstance;
	public constructor(config: AxiosRequestConfig) {
		// 实例化axios
		this.service = axios.create(config);

		/**
		 * @description 请求拦截器
		 * 客户端发送请求 -> [请求拦截器] -> 服务器
		 */
		this.service.interceptors.request.use(
			(config: any) => {
				if (!getUrlParams("id")) {
					const abortController = new AbortController();
					config.signal = abortController.signal;
					abortController.abort("当前URL中未携带id参数,请求已被取消");
				}
				return config;
			},
			(error: AxiosError) => {
				return Promise.reject(error);
			}
		);
	}
}

export default new RequestHttp(config);
相关推荐
LawrenceLan几秒前
36.Flutter 零基础入门(三十六):StatefulWidget 与 setState 进阶 —— 动态页面必学
开发语言·前端·flutter·dart
ego.iblacat2 分钟前
Web 技术与 Nginx 网站环境部署
运维·前端·nginx
ricky_fan2 分钟前
(已解决)安装openclaw龙虾[特殊字符]npm权限问题EACCES
前端·npm·node.js
枫叶丹43 分钟前
【Qt开发】Qt界面优化(十)->常用控件--复选框
c语言·开发语言·c++·qt
TE-茶叶蛋3 分钟前
小程序协同编辑实战:从 Yjs 到纯 JavaScript 的重构之路
javascript·小程序·重构
宵时待雨3 分钟前
C++笔记归纳9:模板进阶
开发语言·数据结构·c++·笔记
专业流量卡3 分钟前
让小龙虾给我写文章
前端
技术人生黄勇6 分钟前
微信接入|企业微信官方插件支持 OpenClaw 3步快速接入(实操版)
java·前端·人工智能·微信·企业微信
....4926 分钟前
修复 Element Plus (Vue3) 输入框获取焦点时边框消失的问题
javascript·vue.js·ecmascript
倔强的石头_7 分钟前
MySQL 兼容性深度解析:从内核级优化到“零修改”迁移工程实践
前端·数据库