使用 abortcontroller 结合 fetch 的 signal 选项,可以在请求发起时绑定一个定时器,一旦超时便强制中断正在进行的网络请求。

如何设置具体的超时时间并处理中断异常?
通过 setTimeout 在指定毫秒数后调用 controller.abort(),并在 fetch 的 catch 块中判断错误是否为 AbortError,从而区分超时与其他网络故障。

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
try {
const response = await fetch('https://api.example.com/data', { signal: controller.signal });
clearTimeout(timeoutId); // 请求成功则清除定时器
const data = await response.json();
console.log(data);
} catch (error) {
if (error.name === 'AbortError') {
console.error('请求超时');
} else {
console.error('其他错误:', error);
}
}
如果请求提前完成,定时器会怎样处理?
当 fetch 成功获取响应并完成数据解析后,必须手动调用 clearTimeout 来取消之前设置的定时器,防止其在后台继续执行并意外中断后续可能存在的其他逻辑。
立即学习“Java免费学习笔记(深入)”;

// 假设这是上一步代码的延续
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
try {
const response = await fetch('https://api.example.com/data', { signal: controller.signal });
// 关键步骤:请求成功后立即清除定时器
clearTimeout(timeoutId);
const data = await response.json();
console.log('数据获取成功:', data);
} catch (error) {
if (error.name === 'AbortError') {
console.error('请求被中断');
} else {
console.error('发生错误:', error);
}
}
基于程序中某个输入、条件或结果的具体问题
在上述代码中,如果 fetch 请求在 5000 毫秒内未完成,controller.abort() 会被触发,导致 fetch 抛出一个类型为 AbortError 的错误对象。此时程序流程进入 catch 块,通过检查 error.name 属性可以明确识别出这是由超时引起的中断,而非服务器返回的业务错误或网络连接失败。


















