前言
前端开发中，我们经常需要使用 HTTP 请求来和远程服务器交互，但是默认使用的 XMLHttpRequest（XHR）对象并没有提供对请求的状态、超时和缓存的控制。在此背景下，好的 HTTP 客户端库就显得尤为重要。在这里我们将介绍一个非常好用的 npm 包：good-guy-http。
good-guy-http 简介
good-guy-http 是一个封装了 HTTP 客户端的 npm 包，它提供了以下最主要的功能：
- 可配置的重试机制；
- 自定义的缓存策略；
- 可取消的请求；
- 多个并发请求的 deduplication 策略；
- 带有清理器的缓存库；
- 智能的串行请求。
安装和使用
首先，我们需要安装 good-guy-http。
npm install good-guy-http --save
在代码中使用 good-guy-http 之前，我们先需要进行一些基本的配置。首先，在你的项目中，你需要为你的 HTTP 请求定制一个缓存策略。good-guy-http 的缓存策略提供了两种消息：staleWhenRevalidate 和 caching。前者返回缓存副本，同时异步获取新的数据，后者则直接返回缓存数据。
以下是一个简单的示例代码：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ----- ----- - --- -------------- ------- ----- --- --------------------------------------- - --------- ------- --------- ---------------------- ------------------ -- - --------------------------- ---
在我的这个例子中，我创建了一个 GoodGuyCache 对象来作为缓存。该对象定义了一个名为 maxAge 的选项，以指定我们想要保留的缓存时间（毫秒为单位）。然后，我使用 cache.get 方法来执行一个 GET 请求。注意，我们可以为此请求指定一个缓存键 cacheKey: ‘data’，以便我们在缓存库中使用该键来标识该请求。
执行上面的代码将会从 http://localhost:3000/data 获取数据，并返回缓存副本。如果在 maxAge 的时间内再次提出该请求，则 good-guy-http 将返回缓存副本，同时获取新的数据。在缓存失效之前，good-guy-http 会一直返回缓存的副本。
请求重试
如果想确保请求即使在失败的情况下，也始终被尝试，则需要使用 maxRetries 选项。例如，以下代码将尝试在五次重试后放弃请求：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ----- ------ - --- ------------ ----------- -- --- ---------------------------------------- - ------ ----- ------------------ -- - --------------------------- ---
我们使用 HttpClient 创建一个新的 HTTP 客户端。然后，我们在 GET 请求中指定一个可选参数 retry: true，以此告诉 good-guy-http 在请求失败时尝试重试。如果尝试五次后仍然失败，则 good-guy-http 将停止重试。
请求取消
当我们需要取消一个正在执行的请求时，我们可以使用 GoodGuyCache 对象中的 cancellationMap 属性。例如，以下代码中我们将创建一个超时请求，在三秒钟后将会取消请求：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
----- ----- - --- --------------
------- -----
---
----- ------- - -----
----- ------------- - -- -- -
------ --------------------------------------- -
--------- -------
------------------ -- -
---------------------------
---
--
----- ------------- - ----- -------- -- -
----- --------------- - --- ------------------
----- ------ - -----------------------
----- ------- - ----------------
----- --------- - ------------- -- -
------------------------
---------------------- -----------
-- ---------
------ --------------------- -- -
-- ----------- --- ------------- -
-- ------ ------- --------
- ---- -
---------------------
-
------------- -- -
------------------------
---
--
------------------------------------------- -
--------- -------
---在这个例子中，我们首先定义了一个 getCachedData 函数，该函数将在缓存中获取数据。然后，我们通过创建一个 AbortController 并在三秒钟后调用 abort() 方法来创建了一个可取消的 GET 请求。
我们调用 cancelableGet 函数来发起一个可取消的 GET 请求，并在 options 中传递了一个 cacheKey 以在缓存库中缓存数据。如果在等待数据期间，我们取消了该请求，则该请求及其响应都将被丢弃。
请求去重
如果我们有多个相同的请求，并且希望 good-guy-http 合并这些请求并仅发送一个请求，则需要使用 deduplicationMap。例如，以下代码将并发执行两个 GET 请求，因为它们共享同一 deduplicationKey。
-- -------------------- ---- -------
------ - ------------- ---------- - ---- ----------------
----- ------ - --- ---------------
----- ----- - --- -----------------
----- --- - ----- -- -
------ --------------- -
----------------- -------
---
--
----------------------------------------------- ---------------------------------------------------- -- -
----------------------------- --- -------------------
---这里，我们首先创建了一个 HTTP 客户端 HttpClient 和一个缓存对象 GoodGuyCache。然后，我们声明了一个 get 函数，该函数采用 URL 作为其唯一参数，并使用 deduplicationKey 指定搜索字符串。如果我们使用相同的搜索字符串调用该方法，则拥有该行为的所有请求仅发送给远程服务器一次。
我们使用 Promise.all 来并发地调用两次 get 方法，并在两个响应中检查是否为相同的响应体。注意，由于我们使用了一个 deduplicationKey，所以该请求只被执行了一次。
总结
好的 HTTP 客户端库对于前端开发非常重要。 good-guy-http 是一个简单、易用的 npm 包，它提供了自定义缓存策略、请求重试、请求取消、请求去重等多种功能。通过阅读本文，你可以了解 good-guy-http 的常用配置和使用方法，下一步，你可以根据你的具体需求来灵活配置 good-guy-http，以解决你在开发中可能遇到的各种 HTTP 请求问题，提高你的应用的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4f8a6e8250f93ef8900326