AbortController 为 fetch 设置统一超时取消的核心是：创建控制器→用其 signal 发起请求→启动定时器，超时后调用 abort()；需注意控制器不可重用、定时器须手动清除、服务端不自动中断、避免依赖未广泛支持的 AbortSignal.timeout()。
用 AbortController 为 fetch 设置统一超时取消，核心是：创建控制器 → 用其 signal 发起请求 → 启动定时器，超时后调用 abort()。
1. 基础写法：单个 fetch 配合超时
这是最直接的模式，适合封装工具函数：
function fetchWithTimeout(url, options = {}, timeout = 5000) {
const controller = new AbortController();
const signal = controller.signal;
const timeoutId = setTimeout(() => controller.abort(), timeout);
return fetch(url, {
...options,
signal
}).finally(() => clearTimeout(timeoutId));
}
// 使用示例
fetchWithTimeout('/api/data', { method: 'GET' })
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.error('请求超时被取消');
} else {
console.error('其他错误:', err);
}
});
2. 统一管理多个请求：复用控制器或集中清理
当需要同时控制多个请求（比如页面级请求池），不建议每个请求都新建控制器。更合理的方式是：
- 按业务场景创建独立的
AbortController实例（如一个页面、一个表单、一个轮询周期） - 将所有相关请求的
signal指向同一个控制器 - 在合适时机（如组件卸载、用户离开、手动取消）统一调用
abort()
例如 React 中常见做法：
useEffect(() => {
const controller = new AbortController();
const loadData = async () => {
try {
const res1 = await fetch('/api/users', { signal: controller.signal });
const res2 = await fetch('/api/posts', { signal: controller.signal });
// ...
} catch (err) {
if (err.name !== 'AbortError') throw err;
}
};
loadData();
return () => controller.abort(); // 组件卸载时取消所有
}, []);
3. 封装成可复用的请求工具（推荐）
把超时 + 取消逻辑抽成函数，支持默认配置和灵活覆盖：
class FetchClient {
constructor(defaultTimeout = 8000) {
this.defaultTimeout = defaultTimeout;
}
request(url, options = {}) {
const controller = new AbortController();
const { timeout = this.defaultTimeout, ...restOpts } = options;
const timeoutId = setTimeout(() => controller.abort(), timeout);
return fetch(url, {
...restOpts,
signal: controller.signal
}).finally(() => clearTimeout(timeoutId));
}
get(url, options) {
return this.request(url, { method: 'GET', ...options });
}
post(url, options) {
return this.request(url, { method: 'POST', ...options });
}
}
// 使用
const api = new FetchClient(5000);
api.get('/users').catch(e => {
if (e.name === 'AbortError') console.log('请求已超时或取消');
});
4. 注意事项和常见坑
关键细节不能忽略：
-
AbortController一旦abort()，其signal永久处于中止状态，不可重用 —— 每次新请求必须新建控制器 - 超时
setTimeout必须在fetch外部启动，并在 Promise 完成后清除（用.finally），否则可能造成内存泄漏 - 服务端响应慢但未断连时，
fetch不会自动中断；只有靠signal主动取消，所以超时逻辑必须由前端控制 - 不是所有浏览器都完全支持
AbortSignal.timeout()（Chrome 117+、Firefox 125+ 支持），生产环境建议暂不依赖该静态方法
