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);
相关推荐
Larry_Yanan21 小时前
Qt多进程(六)共享内存和信号量
开发语言·qt
BD_Marathon21 小时前
bean基础配置
java·开发语言
东方忘忧21 小时前
Qt使用QDesktopServices::openUrl打开系统默认应用(如浏览器,文件,文件夹和邮件)
开发语言·qt
计算机内卷的N天21 小时前
qt的模态和非模态状态
开发语言·qt
释怀不想释怀1 天前
Ajax,vue生命周期(自动加载页面发出请求)Axios
前端·javascript·ajax
一点晖光1 天前
ios底部按钮被挡住
前端·ios·微信小程序
cz追天之路1 天前
华为机考--- 字符串最后一个单词的长度
javascript·css·华为·less
半桶水专家1 天前
go语言中的结构体嵌入详解
开发语言·后端·golang
Light601 天前
CSS逻辑革命:原生if()函数如何重塑我们的样式编写思维
前端·css·响应式设计·组件化开发·css if函数·声明式ui·现代css
蜡笔小嘟1 天前
宝塔安装dify,更新最新版本--代码版
前端·ai编程·dify