JavaScript 中用 AbortSignal 实现 fetch 超时中断，核心是创建 AbortController 实例并传入 signal，配合 setTimeout 在超时后调用 abort()；fetch 接收 signal 后会在中止时抛出 AbortError，需手动 clearTimeout 防内存泄漏，并注意浏览器兼容性及服务端未终止问题。
JavaScript 中用 AbortSignal 实现 fetch 超时中断，核心是借助 AbortController 创建可取消的信号，并在指定时间后调用 abort() 方法。只要把它的 signal 传给 fetch 的 options，请求就会在超时触发时自动中止。
创建 AbortController 并传入 signal
这是最基础的一步：实例化 AbortController，然后把它的 signal 属性作为 fetch 的配置项传入。
-
AbortController提供abort()方法和一个只读的signal对象 -
fetch支持接收{ signal }配置，一旦 signal 被中止，正在进行的请求会立即 reject（抛出AbortError）
用 setTimeout 触发超时 abort
手动设置一个定时器，在超时时间到达时调用 controller.abort() 即可中断请求。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 注意：
setTimeout不会自动清除，建议在请求完成或失败后手动clearTimeout避免内存泄漏（尤其在封装成函数时） - 示例：10 秒超时
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000);
fetch('/api/data', { signal: controller.signal })
.then(response => response.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已超时');
} else {
console.error('其他错误:', err);
}
})
.finally(() => clearTimeout(timeoutId));
封装成可复用的超时 fetch 函数
把逻辑抽出来，能更安全、更方便地复用：
立即学习“Java免费学习笔记（深入）”；
- 返回 Promise，内部自动处理超时与清理
- 支持传入自定义 timeout 毫秒数，默认 5000ms
- 捕获
AbortError并统一转为带提示的 reject，便于上层区分超时和其他错误
function timeoutFetch(url, options = {}, timeout = 5000) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
return fetch(url, {
...options,
signal: controller.signal
}).finally(() => clearTimeout(id));
}
// 使用
timeoutFetch('/api/user', { method: 'POST' }, 8000)
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
throw new Error('网络请求超时，请稍后重试');
}
throw err;
});
注意浏览器兼容性与常见问题
AbortSignal 和 AbortController 在现代浏览器中已广泛支持（Chrome 66+、Firefox 57+、Safari 12.1+），但 IE 完全不支持，如需兼容旧环境需搭配 polyfill 或降级方案。
- 重复调用
abort()是安全的，不会报错 - 如果请求早已完成，
abort()不会产生副作用 - fetch 中断后，响应体（如
response.body）不可读，也不再触发后续流事件 - 服务端请求可能仍在运行（AbortSignal 只影响客户端），需后端配合做幂等或主动取消逻辑（如通过 request ID）
