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);
相关推荐
小堃学编程几秒前
【项目实战】基于protobuf的发布订阅式消息队列(1)—— 准备工作
java·大数据·开发语言
setmoon2142 分钟前
C++中的构建器模式
开发语言·c++·算法
2301_815482932 分钟前
C++中的桥接模式变体
开发语言·c++·算法
SuperEugene3 分钟前
Vue3 Props 传参实战规范:必传校验 + 默认值 + 类型标注,避开 undefined / 类型混用坑|Vue 组件与模板规范篇
前端·javascript·vue.js·前端框架
ZHOUPUYU3 分钟前
PHP性能分析与调优:从定位瓶颈到实战优化
开发语言·后端·html·php
yunyun321233 分钟前
C++与量子计算模拟
开发语言·c++·算法
吴声子夜歌4 分钟前
JavaScript——数组
java·javascript·算法
weixin_462901976 分钟前
ESP32电压显示
开发语言·javascript·css·python
im_AMBER6 分钟前
万字长文:编辑器集成Vercel AI SDK
前端·人工智能·react.js·前端框架·编辑器
Y君8 分钟前
面了3个人后我发现:AI用得最溜的,未必是我最想要的工程师
前端·人工智能·面试