在前端开发中，我们经常需要向后端请求数据，而且请求数据的过程，我们经常需要做一些额外的工作，比如 loading 状态的展示，异常处理等等。一个好用的 React Hook 库 @ahooksjs/use-request 可以帮助我们简化这些工作。
@ahooksjs/use-request 是什么？
@ahooksjs/use-request 是 Ant Design 团队推出的请求数据 React Hook 库，它为我们提供了请求数据时需要的一些操作，减少开发者处理请求数据时的重复代码。它包含了以下特性：
- 自动触发请求和缓存。
- 提供了多种状态，包括
loading,error,success, 以及原始async/await结果。 - 可以简化异常处理。
- 支持 GET，POST, PUT, DELETE 请求方法。
- 支持请求前/后的拦截器。
- 支持请求 debounce 和 throttle。
如何安装 @ahooksjs/use-request？
你可以使用以下命令来安装 @ahooksjs/use-request：
npm install @ahooksjs/use-request
或者使用 yarn：
yarn add @ahooksjs/use-request
如何使用 @ahooksjs/use-request？
在使用 @ahooksjs/use-request 时，我们需要先获取数据所在的 url 地址。这里，我们使用 jsonplaceholder 提供的 API 作为我们的数据源。
我们可以使用以下代码来获取 post 列表：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ------------------------
----- --- - -- -- -
----- - ----- -------- ----- - - ---------------------------------------------------------
-- --------- ------ ----------------------
-- ------- ------ ---------- --------- ---- ---------------
------ -
----
------------ --- ------ ------ -- -
--- ---------
----------------
-------------
-----
---
-----
--
-
------ ------- ----这里，我们使用了 useRequest hook 来获取数据，该 hook 接收一个 url 地址作为它的参数。我们可以通过 loading 和 error 来检查请求是否已经完成。如果请求仍在进行中，我们会显示 loading 的状态；如果请求失败，我们会显示 error 的状态。
一旦数据获取完成，我们将在页面上渲染所有的 post 列表。
如何添加请求参数？
如果我们需要传递参数，我们可以将 url 地址变为一个函数，以便我们传递请求参数：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- ------------------------
----- --- - -- -- -
----- -------- ---------- - ------------
----- - ----- -------- ----- - - ------------- -- --------------------------------------------------------
----- ------------------ - --- -- --------------------------
-- --------- ------ ----------------------
-- ------- ------ ---------- --------- ---- ---------------
------ -
-----
------ -------------- ----------------------------- --
---------------------
------------------
------
--
-
------ ------- ----在上面的代码中，我们使用 useState hook 定义了当前的 postId 状态，然后在调用 useRequest hook 时，将 url 改变为一个函数，并在函数中使用 postId 变量作为请求参数。在页面上展示时，我们只需要在 input 中修改 postId 状态，useRequest hook 将自动使用新的参数来发起请求。
如何处理请求参数错误？
如果我们提供了错误的参数，请求数据将会失败。使用 useRequest hook，我们可以捕捉请求参数错误并展示错误信息：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- ------------------------
----- --- - -- -- -
----- -------- ---------- - --------------------
----- - ----- -------- ----- - - ------------- -- --------------------------------------------------------
----- ------------------ - --- -- --------------------------
-- --------- ------ ----------------------
-- ------- ------ ---------------------------
------ -
-----
------ -------------- ----------------------------- --
---------------------
------------------
------
--
-
------ ------- ----我们将 postId 的值设置为 invalid，请求数据时会触发错误。当数据请求失败时，error 对象将包含错误的详细信息。在页面上，我们只需要使用 error.message 来展示错误信息即可。
如何添加拦截器？
如果我们需要在请求或者响应前添加一些操作，我们可以使用 useRequest hook 提供的拦截器来实现：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- ------------------------
----- --- - -- -- -
----- -------- ---------- - ------------
----- ------------------- - ----- -------- -- -
------------------- ---------- ---- ---------
------ ----- ---------
--
----- - ----- -------- ----- - - -----------
-- -- -------------------------------------------------------
-
-------------- ------
------- - --- ------ --
------------- -
-------- -------------------
--
--
--
----- ------------------ - --- -- --------------------------
-- --------- ------ ----------------------
-- ------- ------ ---------------------------
------ -
-----
------ -------------- ----------------------------- --
---------------------
------------------
------
--
-
------ ------- ----在上面的代码中，我们定义了一个 handleBeforeRequest 函数作为请求拦截器，并在调用 useRequest hook 时，使用 interceptors 设置拦截器配置。在我们的示例中，handleBeforeRequest 函数将在请求发起前输出请求的地址和请求选项。每次请求时，它将打印以下信息：
Before Request: https://jsonplaceholder.typicode.com/posts/1 { method: 'GET', headers: { 'Content-Type': 'application/json' }, params: { id: 1 } }如何添加 debounce 和 throttle？
如果我们需要防止请求过多数据时过于频繁请求返回数据，我们可以使用 useRequest hook 提供的 debounce 和 throttle 来进行控制：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- ------------------------
----- --- - -- -- -
----- -------- ---------- - ------------
----- ------------------- - ----- -------- -- -
------------------- ---------- ---- ---------
------ ----- ---------
--
----- - ----- -------- ----- - - -----------
-- -- -------------------------------------------------------
-
-------------- ------
------- - --- ------ --
---------------- -----
----------------- -----
------------- -
-------- -------------------
--
--
--
----- ------------------ - --- -- --------------------------
-- --------- ------ ----------------------
-- ------- ------ ---------------------------
------ -
-----
------ -------------- ----------------------------- --
---------------------
------------------
------
--
-
------ ------- ----在上面的代码中，我们使用了 pollingInterval 和 throttleInterval 配置对象来控制数据的请求时间间隔。我们使用了 debounce 来定义请求的间隔，如果在间隔内执行的请求将被丢弃。如果使用 throttle，则每隔一段时间会执行一次请求。
结论
@ahooksjs/use-request 提供了很多方式来帮助我们更好、更简单地处理数据请求。 我们可以使用 useRequest hook 来快速地发起请求，处理异常和错误信息，使用拦截器和防抖等来优化我们的应用。 使用这个库，我们可以大大减少在数据请求时的代码量，并提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6ca088a9b7065299ccb95f