AbortController 防竞态的核心是新请求发起前中止旧请求,确保只响应最新异步结果;适用于搜索联想、下拉刷新等场景,避免旧响应覆盖新状态导致 UI 与数据不一致。

用 AbortController 防止状态竞态,核心是:在新请求发起前主动中止旧请求,确保组件或逻辑只响应最新一次异步操作的结果。
为什么需要 AbortController 来防竞态?
常见场景如搜索框输入联想、下拉刷新、表单自动保存——用户快速连续触发请求时,后发请求可能比先发的更早返回。若不加控制,旧响应覆盖新状态(比如显示过期的搜索结果),就会出现 UI 与数据不一致的竞态问题。AbortController 提供标准、轻量、可取消的信号机制,让 fetch、setTimeout(配合封装)、甚至自定义 Promise 都能响应中止指令。
在 fetch 请求中直接使用 signal
现代 fetch 原生支持 signal 选项,遇到 abort() 会立即 reject 并抛出 AbortError:
/api/search?q=${query}封装支持取消的 Promise(适配非 fetch 场景)
对于 setTimeout、Promise.all 或第三方库(如 axios),可手动监听 signal.aborted:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 用
signal.addEventListener('abort', ...)注册清理逻辑 - 在 Promise 内部定期检查
signal.aborted,提前退出 - axios 用户可直接传
{ signal },它已内置兼容
function delay(ms, signal) {
return new Promise((resolve, reject) => {
if (signal.aborted) {
reject(new DOMException('Aborted', 'AbortError'));
return;
}
<pre class="brush:php;toolbar:false;">const timeout = setTimeout(() => resolve(), ms);
signal.addEventListener('abort', () => {
clearTimeout(timeout);
reject(new DOMException('Aborted', 'AbortError'));
}, { once: true });}); }
// 使用示例:防抖搜索中取消待执行的延时请求 let debounceTimer = null; async function debouncedSearch(query) { if (debounceTimer) clearTimeout(debounceTimer); if (controller) controller.abort();
controller = new AbortController();
debounceTimer = setTimeout(() => { searchWithDelay(query, controller.signal); }, 300); }
React 中结合 useEffect 清理(推荐模式)
在组件卸载或依赖变更时自动 abort,避免内存泄漏和无效 setState:
- 每次 effect 执行前创建新
AbortController - 在 cleanup 函数中调用
controller.abort() - catch 中只处理非
AbortError的异常
useEffect(() => {
const controller = new AbortController();
<p>async function loadData() {
try {
const res = await fetch('/api/data', { signal: controller.signal });
const json = await res.json();
setData(json);
} catch (err) {
if (err.name !== 'AbortError') setError(err.message);
}
}</p><p>loadData();</p><p>return () => controller.abort(); // 组件卸载或重新运行 effect 时中止
}, [/<em> 依赖项 </em>/]);</p>Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










