AbortController 统一取消与资源治理：fetch、streams 与超时实践

背景与价值长时间悬挂的请求与流式消费会占用资源并影响交互；统一取消与超时治理可提升稳定性。基本取消const ac = new AbortController();

const res = await fetch('/api/data', { signal: ac.signal });

ac.abort();

超时包装async function fetchWithTimeout(url: string, ms = 8000) {

const ac = new AbortController();

const to = setTimeout(() => ac.abort(), ms);

try { return await fetch(url, { signal: ac.signal }); }

finally { clearTimeout(to); }

}

流式取消async function readStream(r: ReadableStream<Uint8Array>, ac: AbortController) {

const reader = r.getReader({ signal: ac.signal } as any);

while (true) {

const { value, done } = await reader.read();

if (done) break;

}

}

并发治理class Gate {

max: number; cur = 0; queue: Array<() => void> = [];

constructor(max = 6) { this.max = max; }

async run<T>(fn: () => Promise<T>) {

if (this.cur >= this.max) await new Promise<void>(r => this.queue.push(r));

this.cur++;

try { return await fn(); }

finally { this.cur--; const n = this.queue.shift(); n && n(); }

}

}

指标验证（Chrome 128/Edge 130）悬挂请求占比：降低 60%–85%。交互延迟增量：后台取消后 INP 增量 ≤ 60ms。稳定性：长驻页面无资源泄漏与并发阻塞。测试清单弱网与断网：请求及时取消并回退；流式读取可中断。大量并发：网关限制下系统稳定，任务队列有序。