fetch 是现代 JavaScript 中进行网络请求的强大工具，它简洁的 API 和原生 Promise 支持使得开发者能够更方便地处理 HTTP 请求。然而，fetch 并没有原生支持请求超时功能。为了确保请求在一定时间内得到响应，尤其是在处理网络波动或响应延迟的情况下，我们通常需要为 fetch 手动添加超时控制。

在本文中，我将介绍如何为 fetch 添加超时功能，分析其实现的原理，常见的处理方式以及完整的示例代码。我们将讨论以下内容：

1. fetch 请求的基本概念
2. 为什么需要为 fetch 添加超时
3. 使用 Promise.race 实现超时功能
4. 基于 AbortController 优化超时处理
5. 完整的代码示例和注意事项

1. fetch 请求的基本概念

fetch 是用于发起网络请求的 API，返回一个 Promise，可以处理 HTTP 请求和响应。通常，我们可以使用如下方式进行 GET 请求：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

这种方式虽然简洁，但是存在一个问题：如果服务器响应时间过长，fetch 会一直等待，直到收到响应或网络错误才会被拒绝。默认情况下，它不会因为超时而自动终止。

2. 为什么需要为 fetch 添加超时

在现代 Web 应用中，网络请求超时是非常常见的场景。比如：

• 用户网络状态较差时，响应时间可能会过长。
• 服务端出现问题，可能会导致响应异常缓慢。

为了提升用户体验，确保应用的响应性，我们通常希望请求在指定的时间内无响应时能自动中止。这种机制不仅可以避免用户长时间等待，还可以优化应用的资源使用。

3. 使用 Promise.race 实现超时功能

一种常见的实现超时的方法是使用 Promise.race，它可以并行执行多个 Promise，并返回第一个完成的 Promise 结果。我们可以构造一个基于超时的 Promise，与 fetch 竞争，达到超时控制的效果。

下面是一个示例，展示了如何使用 Promise.race 来实现超时功能：

function fetchWithTimeout(url, options = {}, timeout = 5000) {
  // 创建一个超时 Promise
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Request timed out')), timeout)
  );

  // 使用 Promise.race 处理超时
  return Promise.race([
    fetch(url, options),
    timeoutPromise
  ]);
}

// 使用示例
fetchWithTimeout('https://api.example.com/data', {}, 3000)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

解释：

• Promise.race 会同时运行 fetch 和 timeoutPromise。若 fetch 在超时之前完成，则返回其结果。若超时，则 timeoutPromise 会首先 reject，导致请求失败。
• 这种方法虽然简单，但无法真正中止 fetch 请求。超时后 fetch 仍然会在后台继续执行，浪费网络资源。

4. 基于 AbortController 优化超时处理

AbortController 是一个可以中止正在进行中的 fetch 请求的 API。通过结合 AbortController 和超时机制，我们可以在超时后真正终止请求，而不仅仅是返回一个超时错误。

AbortController 的基本使用

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Fetch aborted');
    } else {
      console.error('Fetch failed:', error);
    }
  });

// 在某个条件下中止请求
controller.abort();

结合 AbortController 和超时功能

通过将 AbortController 和 Promise.race 结合，我们可以在超时后中止请求：

function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const signal = controller.signal;

  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => {
      controller.abort(); // 超时后中止 fetch
      reject(new Error('Request timed out'));
    }, timeout)
  );

  return Promise.race([
    fetch(url, { ...options, signal }),
    timeoutPromise
  ]);
}

// 使用示例
fetchWithTimeout('https://api.example.com/data', {}, 3000)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

解释：

• 在 timeoutPromise 被触发时，AbortController 会中止 fetch 请求，释放网络资源。
• 超时后，fetch 会被 AbortError 捕获到，我们可以在 .catch 中处理这个错误。

5. 完整的代码示例和注意事项

以下是一个完整的代码示例，展示了如何结合 Promise.race 和 AbortController 实现超时功能的 fetch 请求：

function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const signal = controller.signal;

  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => {
      controller.abort();
      reject(new Error('Request timed out'));
    }, timeout)
  );

  return Promise.race([
    fetch(url, { ...options, signal }),
    timeoutPromise
  ]);
}

// 调用 fetchWithTimeout 进行请求
fetchWithTimeout('https://api.example.com/data', {}, 3000)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log('Data:', data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Fetch aborted');
    } else {
      console.error('Error:', error);
    }
  });

注意事项：

1. 支持性：AbortController 在较旧的浏览器或某些环境中可能不被支持，开发者应检查其兼容性或提供 polyfill。
2. 取消请求后处理：当请求被取消时，fetch 的 Promise 会抛出 AbortError，因此需要在错误处理中专门捕获此错误。
3. 资源管理：当请求较多时，合理设置超时时间可以节约资源并提升用户体验。

结论

为 fetch 请求添加超时功能是提升用户体验的一个重要优化手段。虽然 fetch 并不直接支持超时，但通过 Promise.race 和 AbortController，我们可以轻松实现这一功能。合理设置超时可以避免应用程序陷入长期等待状态，并确保用户得到更快的响应反馈。

这种方式不仅可以用于网络请求，也适用于其他基于 Promise 的异步任务中。希望通过本文，读者能更好地理解如何在实际项目中应用超时控制，提升应用的稳定性和用户体验。