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);
相关推荐
Jay叶湘伦7 分钟前
【极简】用 Vue 写一个 ChatGPT 前端应用,支持连续对话、Markdown 渲染与本地记忆
前端·vue.js·chatgpt
大家的林语冰7 分钟前
《前端周刊》尤大官宣 Vite 8 稳定版首发!npm 新官网?React 官网更新。focusgroup 新功能!
前端·javascript·vite
Sgf2279 分钟前
第15章 网络编程
开发语言·网络·php
kuuailetianzi9 分钟前
构建企业级督办任务系统:Vue3 + TypeScript 实战(多级任务拆解+批量操作+进度追踪+单元格合并)
前端·javascript·typescript
Hilaku11 分钟前
王自如公开招聘全栈前端,要求有多离谱?
前端·javascript·ai编程
Ares-Wang18 分钟前
Python》》FastAPI 异步框架 接口 pymysql【同步】 aiomysql【异步】
开发语言·python·fastapi
大漠_w3cpluscom23 分钟前
CSS 技巧:CSS 中选择 html 元素的各种奇技淫巧
前端·css·weui
阿里嘎多学长35 分钟前
2026-03-27 GitHub 热点项目精选
开发语言·程序员·github·代码托管
菜菜小狗的学习笔记41 分钟前
Java SE(一)内部类、Lambda表达式、Stream流
java·开发语言
码云数智-园园42 分钟前
Java中的重载(Overload)与重写(Override):本质区别、场景与注意事项
java·开发语言