JavaScript Fetch API 怎么实现接口请求结果超时处理-js教程-PHP中文网

使用 abortcontroller 结合 fetch 的 signal 选项是实现接口请求超时处理的标准做法。通过创建一个控制器实例，将其 signal 传递给 fetch 请求，并设置一个定时器在指定时间后调用控制器的 abort() 方法，即可强制中断超时的请求。当请求被中止时，fetch 会抛出一个 aborterror，你可以在 catch 块中捕获该错误并进行相应的业务逻辑处理。

JavaScript Fetch API 怎么实现接口请求结果超时处理

如何封装带超时的 fetch 函数

将上述逻辑封装为一个通用的工具函数可以简化代码。这个函数接收 URL、配置项和超时时间作为参数，返回一个 Promise。在函数内部，我们初始化 AbortController，启动定时器，然后执行 fetch。如果请求成功完成，清除定时器并返回响应；如果发生错误或超时，清除定时器并抛出异常。

JavaScript Fetch API 怎么实现接口请求结果超时处理

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

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 解析失败、无网络连接）则会抛出不同的错误对象，应分别处理。

JavaScript Fetch API 怎么实现接口请求结果超时处理

// 使用示例
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);
    }
  });