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);

}