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);
相关推荐
方安乐8 分钟前
单元测试之helper函数
前端·javascript·单元测试
chh56319 分钟前
C++--模版初阶
c语言·开发语言·c++·学习·算法
音仔小瓜皮19 分钟前
【Web八股】深入理解浏览器DOM事件流,灵活控制它!
前端·web
灼灼桃花夭1 小时前
js之阳历 → 农历(含时辰)转换函数
开发语言·前端·javascript
派大星酷1 小时前
Java 调用 Kimi API 实战:实现与大模型的简单对话
java·开发语言·ai编程
gyx_这个杀手不太冷静1 小时前
大人工智能时代下前端界面全新开发模式的思考(三)
前端·架构·ai编程
小李子呢02111 小时前
前端八股性能优化(1)---防抖和节流
开发语言·前端·javascript
henrylin99991 小时前
Hermes Agent 核心运行系统调用流程--源码分析
开发语言·人工智能·python·机器学习·hermesagent
珎珎啊1 小时前
Python3 字符串核心知识点
开发语言·python
会编程的土豆2 小时前
01背包与完全背包详解
开发语言·数据结构·c++·算法