拥抱可靠的 Fetch 请求：解锁超时扩展功能！

2023-06-30 20:15:37

告别 Fetch 请求超时的困扰

作为现代 Web 开发中不可或缺的一部分，Fetch API 简化了异步请求的处理。然而，其默认的超时行为却时常让人头疼。网络不稳定或服务器响应迟缓时，Fetch 请求会陷入漫长的等待，导致应用程序卡顿甚至崩溃。

揭秘超时扩展的通用解法

为了解决这一痛点，业界提出了多种超时扩展方案。但这些方案大多局限于特定场景或框架，缺乏通用性和可重复性。经过深入探索和实践，我们总结出一套简洁高效的超时扩展方案，适用于任何 Fetch 请求场景，无论简单或复杂。

方案一：利用原生 AbortController API

AbortController API 是浏览器提供的原生解决方案，允许开发者在请求发出后随时取消。结合 AbortController 和 Fetch API，我们可以轻松实现 Fetch 请求的超时控制：

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

fetch('https://example.com/api/data', {
  signal
})
  .then(response => {
    // 请求成功，处理响应
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 请求超时，处理超时逻辑
    } else {
      // 请求失败，处理其他错误
    }
  });

setTimeout(() => {
  controller.abort();
}, 5000); // 设置超时时间为 5 秒

方案二：使用第三方库

如果您更偏爱第三方库，推荐使用 fetch-timeout 库。它提供了一个简单的 API，只需一行代码即可为 Fetch 请求添加超时处理：

import fetchTimeout from 'fetch-timeout';

fetchTimeout('https://example.com/api/data', {
  timeout: 5000
})
  .then(response => {
    // 请求成功，处理响应
  })
  .catch(error => {
    // 请求超时，处理超时逻辑
  });

常见问题解答

1. 为什么 Fetch 请求会超时？

当网络状况不佳或服务器响应迟缓时，Fetch 请求可能会长时间等待，导致超时。

2. 如何判断 Fetch 请求是否超时？

使用 AbortController 时，可以通过 error.name === 'AbortError' 来判断请求是否超时。使用 fetch-timeout 库时，库会自动抛出 AbortError。

3. AbortController 和 fetch-timeout 的区别是什么？

AbortController 是浏览器原生 API，提供对超时处理的精细控制。fetch-timeout 是一个第三方库，提供了更简单易用的超时处理方式。

4. 超时时间应该设置多长？

超时时间应根据具体场景和网络条件确定，通常在 5-10 秒之间。

5. 超时处理的最佳实践是什么？

最佳实践包括：