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);
相关推荐
Xeon_CC15 分钟前
在react-app-rewired工程项目中,调试AntVG6库源码包。
前端·react.js·前端框架
864记忆18 分钟前
Qt Network 模块中的函数详解
开发语言·网络·qt
864记忆19 分钟前
Qt Sql 模块中的函数详解
开发语言·网络·qt
是店小二呀29 分钟前
五分钟理解Rust的核心概念:所有权Rust
开发语言·后端·rust
她说人狗殊途32 分钟前
存储引擎MySQL
开发语言
自然数e38 分钟前
C++多线程【线程管控】之线程转移以及线程数量和ID
开发语言·c++·算法·多线程
Arva .40 分钟前
ConcurrentHashMap 的线程安全实现
java·开发语言
Dxy12393102161 小时前
Python为什么要使用可迭代对象
开发语言·python
o***Z4481 小时前
前端无障碍开发检查清单,WCAG合规
前端
摇滚侠1 小时前
Vue 项目实战《尚医通》,预约挂号的路由与静态搭建,笔记36
javascript·vue.js·笔记