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);
相关推荐
借个火er3 小时前
Qiankun vs Wujie:微前端框架深度对比
前端
Halo_tjn3 小时前
Java IO流实现文件操作知识点
java·开发语言·windows·算法
小笔学长3 小时前
事件委托:优化事件处理性能
javascript·性能优化·项目实战·前端开发·事件委托
freeWayWalker3 小时前
【前端工程化】前端代码规范与静态检查
前端·代码规范
FL16238631293 小时前
VTK源码编译时候选qt5路径
开发语言·qt
Felven3 小时前
C. Maximum Median
c语言·开发语言·算法
C2X3 小时前
关于Git Graph展示图的理解
前端·git
昊茜Claire3 小时前
鸿蒙开发之:性能优化与调试技巧
前端
雲墨款哥3 小时前
从一行好奇的代码说起:Vue怎么没有React的<StrictMode/>
前端
小肥宅仙女3 小时前
告别繁琐!React 19 新特性对比:代码量减少 50%,异步状态从此自动管理
前端·react.js