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);
相关推荐
重生之后端学习5 分钟前
62. 不同路径
开发语言·数据结构·算法·leetcode·职场和发展·深度优先
肉肉不吃 肉10 分钟前
Vue Router 路由模式
前端·javascript·vue.js
北寻北爱10 分钟前
Vue-Router
前端·javascript·vue.js
肉肉不吃 肉16 分钟前
什么是闭包
前端·javascript
栗子~~17 分钟前
hardhat 单元测试时如何观察gas消耗情况
开发语言·单元测试·区块链·智能合约
The hopes of the whole village19 分钟前
Matlab FFT分析
开发语言·matlab
窝子面20 分钟前
十六、按钮组件
前端
天天向上102420 分钟前
vue 页面内实现el-table和div自动滚动
前端·javascript·vue.js
兰文彬27 分钟前
n8n 2.x版本没有内嵌Python环境
开发语言·python
前端老石人28 分钟前
HTML文档元素与元数据详解
前端·html