使用 abortcontroller 结合 fetch 的 signal 选项是实现接口请求超时处理的标准做法。通过创建一个控制器实例，将其 signal 传递给 fetch 请求，并设置一个定时器在指定时间后调用控制器的 abort() 方法，即可强制中断超时的请求。当请求被中止时，fetch 会抛出一个 aborterror，你可以在 catch 块中捕获该错误并进行相应的业务逻辑处理。
如何封装带超时的 fetch 函数
将上述逻辑封装为一个通用的工具函数可以简化代码。这个函数接收 URL、配置项和超时时间作为参数，返回一个 Promise。在函数内部，我们初始化 AbortController，启动定时器，然后执行 fetch。如果请求成功完成，清除定时器并返回响应；如果发生错误或超时，清除定时器并抛出异常。
function fetchWithTimeout(url, options = {}, timeout = 3000) {
const controller = new AbortController();
const { signal } = controller;
const timeoutId = setTimeout(() => {
controller.abort();
}, timeout);
return fetch(url, { ...options, signal })
.then(response => {
clearTimeout(timeoutId);
return response;
})
.catch(error => {
clearTimeout(timeoutId);
if (error.name === 'AbortError') {
throw new Error('Request timed out');
}
throw error;
});
}如何处理超时后的具体错误状态
在实际应用中，区分超时错误和其他网络错误非常重要。当 fetch 因为信号中止而失败时，抛出的错误对象名为 AbortError。开发者可以在 catch 块中检查 error.name 属性。如果确认是超时，可以记录日志、显示用户友好的提示或触发重试机制。其他类型的网络错误（如 DNS 解析失败、无网络连接）则会抛出不同的错误对象，应分别处理。
立即学习“Java免费学习笔记（深入）”；
// 使用示例
fetchWithTimeout('/api/data', {}, 5000)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => {
if (err.message === 'Request timed out') {
console.warn('请求超时，请检查网络或稍后重试');
} else {
console.error('请求失败:', err);
}
}); 
