AbortController 取消与超时封装实践

概述通过 AbortController 可以为请求与任务提供取消与超时机制。本文给出能力检测与封装实现并在 Fetch 中示例。能力检测与超时封装const supportsAbort = typeof AbortController === 'function'; function timeoutSignal(ms) { if (!supportsAbort) return null; const c = new AbortController(); const t = setTimeout(() => c.abort(), ms); return { signal: c.signal, cancel: () => clearTimeout(t) }; } async function fetchWithTimeout(url, ms) { if (!supportsAbort) return fetch(url); const { signal } = timeoutSignal(ms); return fetch(url, { signal }); } 组合取消与手动中止function createCancelable() { const c = new AbortController(); return { signal: c.signal, abort: () => c.abort() }; } async function runTask(fn, signal) { if (signal && signal.aborted) throw new DOMException('aborted', 'AbortError'); return fn(signal); }