什么是 fetch-with-timeout
fetch-with-timeout 是一个 npm 包，它为浏览器的 fetch 请求添加了超时功能。如今，fetch 是前端开发中经常使用的一种方式来获取远程数据，但是 fetch 请求默认没有超时机制。因此，当发生网络异常或请求被阻塞时，它将一直等待并导致用户体验变差。这就是 fetch-with-timeout 产生的背景。
使用 fetch-with-timeout，我们可以为每个 fetch 请求设置一个超时时间，在超时时间之后，如果该请求还没有得到响应，将会自动取消请求，避免不必要的等待和阻塞。它对于需要处理网络异常和改善用户体验的项目非常有用。
如何安装 fetch-with-timeout
fetch-with-timeout 可以通过 npm 安装。可以使用以下命令在项目中引入它。
npm install fetch-with-timeout
如何使用 fetch-with-timeout
使用 fetch-with-timeout 非常简单，它的使用方法和 fetch 基本相同。只需要调用 fetchWithTimeout 方法，传入超时时间和请求参数，然后处理响应即可。
下面是一个简单的示例，它使用 fetchWithTimeout 请求 github 的搜索 API。
-- -------------------- ---- -------
------ ---------------- ---- ---------------------
----- --------------- - ---------------------------------------------
----- ------------------ - ------- -- -
----- --- - -------------------------------------------
----- ------- - -
-------- -
------- ------------------
--
-------- ---- -- ------- - --
--
------ --------------------- --------
-------------- -- ----------------
---------- -- -
------------------
------ -----
--
------------ -- -
---------------------
---
--
----------------------------上面的示例中，我们首先定义了一个常量 SEARCH_ENDPOINT 来存储 API 的路径，然后定义了一个 searchRepositories 函数来发起请求。
在函数中，我们首先构造了请求的 URL，并设置了一些请求的参数（比如请求头和超时时间）。然后使用 fetchWithTimeout 方法发起请求，并在成功时处理响应数据，错误时打印错误信息。最后，我们调用 searchRepositories 函数来搜索与“react”相关的仓库并打印响应结果。
总结
fetch-with-timeout 是一个很有用的 npm 包，可以让我们为每个 fetch 请求设置超时时间，避免等待和阻塞。在实际开发中，可以使用它来改善用户体验并提高项目的鲁棒性。
在使用 fetch-with-timeout 时，我们只需要调用 fetchWithTimeout 方法，传入超时时间和请求参数，然后处理响应即可。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1381e8991b448e6d7d