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);
相关推荐
Lee川25 分钟前
🚀《JavaScript 灵魂深处:从 V8 引擎的“双轨并行”看执行上下文的演进之路》
javascript·面试
汪汪队长33 分钟前
谷歌浏览器自定义油猴插件
前端
ZFSS35 分钟前
SeeDance Tasks API 的对接和使用
前端·人工智能
睿智的仓鼠37 分钟前
🦞OpenClaw 快速部署及使用指南
前端·人工智能
前端付豪37 分钟前
Nest 项目小实践之图书增删改查
前端·node.js·nestjs
比特鹰38 分钟前
手把手带你用Flutter手搓人生K线
前端·javascript·flutter
大雨还洅下38 分钟前
前端JS: 数组扁平化
javascript
奔跑路上的Me42 分钟前
前端导出 Word/Excel/PDF 文件
前端·javascript
bluceli42 分钟前
JavaScript异步编程深度解析:从回调到Async Await的演进之路
前端·javascript
青青家的小灰灰1 小时前
Vue 3 新标准:<script setup> 核心特性、宏命令与避坑指南
前端·vue.js·面试