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);
相关推荐
lly2024061 分钟前
移动设备统计:行业趋势与市场洞察
开发语言
专注VB编程开发20年4 分钟前
c#模仿内置 Socket.Receive(无需 out/ref,直接写回数据)
开发语言·c#
爱内卷的学霸一枚4 分钟前
Python并发编程与性能优化实战指南
开发语言·python·性能优化
pusheng20256 分钟前
燃料电池电化学传感器在硫化物固态电池安全监测中的技术优势解析
前端·人工智能·安全
jaysee-sjc6 分钟前
【项目二】用GUI编程实现石头迷阵游戏
java·开发语言·算法·游戏
それども7 分钟前
Excel文件解析 - SAX和DOM方式的区别
java·前端·excel
それども9 分钟前
Excel文件解析 - SAX startRow cell endRow 执行顺序
java·前端·excel
Byron070710 分钟前
基于 Vue 的微前端架构落地实战:从 0 到 1 搭建企业级多应用体系
前端·vue.js·架构
一位搞嵌入式的 genius11 分钟前
从 URL 到渲染:JavaScript 性能优化全链路指南
开发语言·前端·javascript·性能优化
芭拉拉小魔仙11 分钟前
Vue 3 组合式 API 详解:告别 Mixins,拥抱函数式编程
前端·javascript·vue.js