应使用 AbortController 主动中止前序请求:声明 currentController 变量保存控制器,点击时先 abort 再新建;推荐叠加 300ms 防抖;fetch 直传 signal,Axios v0.27+ 同理,旧版用 CancelToken;需捕获 AbortError 并在组件卸载时 cleanup。

用户连续点击触发多个请求时,要取消中间的未完成请求,核心是使用 AbortController 配合请求标识或覆盖机制,确保只有最后一次点击发起的请求能完成,其余自动中止。
用 AbortController 主动中止上一个请求
每次新请求前,先调用上一个控制器的 abort() 方法。关键在于把控制器实例保存为可更新的引用(如变量或闭包中的引用):
- 声明一个外部变量(如
let currentController = null)存储当前请求的控制器 - 点击时,若
currentController存在,先执行currentController.abort() - 新建
AbortController,赋值给currentController,再发起带signal的 fetch 请求
配合防抖或节流更稳妥(可选但推荐)
单纯取消请求不能阻止高频点击产生大量请求对象和网络开销。建议叠加轻量级防抖(如 300ms):
- 点击后不立即发请求,等待用户停止点击一小段时间
- 期间新点击会重置计时器,只保留最后一次意图
- 既减少无效请求数量,又降低取消频率,提升稳定性
注意 fetch 和 Axios 的写法差异
原生 fetch 直接传 { signal } 即可;Axios 需用 CancelToken(v0.22–)或 AbortController(v0.27+):
立即学习“Java免费学习笔记(深入)”;
- Axios v0.27+:同 fetch,
axios.get(url, { signal }) - Axios 旧版:用
CancelToken.source()创建 source,调用source.cancel(),并传cancelToken: source.token - 务必检查控制台是否报
AbortError或Cancel,确认中止生效
避免常见陷阱
取消不是“删除请求”,而是中断底层连接并让 Promise 拒绝(reject)。需正确处理错误分支:
- 不要忽略
catch中的AbortError(可静默处理,不提示用户) - 别在请求发出后才创建控制器——必须在
fetch调用前就准备好signal - 组件卸载(如 React useEffect cleanup)时也应调用
abort(),防止内存泄漏或状态更新到已销毁组件


















