API请求超时没商量？利用fetch实现超时小妙招

fetch vs. ajax：深入探讨 API 请求超时

作为一名前端开发者，API 请求超时是一个无法忽视的棘手问题。当 API 响应迟钝时，用户可能会感到沮丧，甚至放弃使用你的应用程序。更糟糕的是，API 请求超时还可能导致应用程序崩溃，给用户带来糟糕的体验。

为了解决这一问题，fetch 登场了。这是一个现代化的 JavaScript API，可让你轻松实现 API 请求超时，从而提升用户体验并防止应用程序崩溃。

为什么 fetch 超时如此重要？

在网络世界中，时间就是一切。如果你的 API 请求需要太长时间，用户可能会感到沮丧，从而影响应用程序的可用性和信誉。此外，请求超时会给服务器带来额外的负载，甚至导致服务器崩溃。

使用 fetch 设置 API 请求超时

使用 fetch 实现 API 请求超时非常简单。只需在 fetch 请求中指定 timeout 属性，该属性是一个毫秒值，表示请求的超时时间。

fetch('https://example.com/api/data', {
  timeout: 5000,
})
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

如果请求在指定的超时时间内没有收到响应，fetch 就会抛出错误。你可以使用 catch() 方法来捕获此错误，并向用户显示错误消息。

fetch 与 ajax 的区别

fetch 和 ajax 都是用于发送 HTTP 请求的 API，但它们之间有一些关键区别：

特性	fetch	ajax
API 类型	原生 JavaScript API	使用 XMLHttpRequest 的库
处理请求的方式	Promise	回调函数
超时支持	内置	没有内置支持
流支持	支持	不支持
取消请求	支持	不支持

配置超时行为

除了 timeout 属性，fetch 还有其他几个属性可用于配置超时行为：

• keepalive：指定请求超时后是否保持连接。
• signal：AbortController 对象的信号，用于取消请求。

最佳实践

在使用 fetch 超时时，请记住以下最佳实践：

• 为每个请求设置一个合理的超时时间。
• 在 catch() 方法中处理超时错误，并向用户显示明确的错误消息。
• 考虑使用 keepalive 属性来优化后续请求。

常见问题解答

1. 我应该为所有 API 请求设置超时吗？

建议为所有非关键 API 请求设置超时。对于关键请求，你可以考虑使用更长的超时时间或禁用超时。

2. 超时时间太短或太长会有什么后果？

超时时间太短会导致错误响应，而超时时间太长会导致用户等待时间过长。

3. 如何取消 API 请求？

使用 AbortController 创建一个信号，并在 fetch() 调用中将其传递给 signal 属性。然后，调用 AbortController.abort() 方法来取消请求。

4. 如何处理跨域请求的超时？

跨域请求会引发一个 CORS 错误，而不是超时错误。需要在服务器上启用 CORS 来解决此问题。

5. 如何测试 API 请求超时？

使用模拟工具（例如 Fiddler 或 Charles Proxy ）来模拟网络延迟或中断，从而测试 API 请求超时。

结论

使用 fetch 超时可以显著提升用户体验，并防止应用程序崩溃。通过理解 fetch 超时的机制和配置选项，你可以构建健壮且响应迅速的 Web 应用程序。