什么是 redux-fetch-utils
redux-fetch-utils 是一个基于 Redux 的工具库，它提供了一系列方便的方法来简化异步请求的操作。
redux-fetch-utils 基于 Redux-thunk 实现了 Redux 异步流程中的中间件，它允许我们在 Redux 中使用 async/await 来处理异步请求，同时提供了一系列的帮助函数来简化异步请求的使用。
在 Redux 中，我们通常需要进行异步请求来获取数据，而这个过程其实包含了多个步骤，如发起请求、等待响应返回、处理响应数据等。redux-fetch-utils 提供了一些常用的函数来简化这些操作，使得我们能够更加方便地进行数据获取和处理。
安装和使用
redux-fetch-utils 可以通过 npm 来安装：
--- ------- -----------------
使用时，我们需要在 Redux store 中引入中间件：
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ - -------------------------- - ---- --------------------
-- ---- --------
-- ---
----- ------- - ------ - --- ------- -- -
------ ------------- -
-- ---
--------
------ ------
-
--
-- ---- --------- ----------
----- ----- - ------------
--------
---------------------- -----------------------------
--使用中，我们可以通过 dispatch 来发起异步请求：
------ - ---------- - ---- --------------------
-- ---- ----- --- ------
----- ---------------- - -- --
---------------------
-----------------------------------------------
--------------
--
-- -------- -----
-----------------------------------上述代码中，fetchData 方法接受两个参数，第一个参数是请求的 URL，第二个参数是 Redux 中定义的 action type。
当请求成功返回时，redux-fetch-utils 会自动触发一个同名类型的 action，并将响应的数据一起传递给 reducer。
我们可以在 reducer 中处理这个 action，来更新 store 中的状态。
深入了解 redux-fetch-utils
除了上面介绍的 fetch 方法外，redux-fetch-utils 还提供了其他一些常用的异步处理方法，下面我们逐一进行介绍：
fetchJson
fetchJson 是一个对 fetch 的进一步封装，用于请求 JSON 数据。
fetchJson 方法接受两个参数，第一个是请求的 URL，第二个是 options 对象，可以通过这个对象来配置请求的相关参数，如 method，body 等。
示例代码如下：
------ - ---------- - ---- --------------------
----- ------- - -
------- -------
-------- -
--------------- -------------------
-- ---
--
----- ---------------------
-- ---
-
----- ------------- - -- --
---------------------
---------------------------------------------
--------
-----------------
--上述代码中，我们使用 fetchJson 方法向指定的 URL 发起了一个 POST 请求，并传递了一些请求参数。请求成功后，会触发一个名为 FETCH_JSON_DATA 的 action。
fetchWithChecks
fetchWithChecks 是另一个对 fetch 的封装，它可以对请求结果进行验证，并进行相应的处理。
fetchWithChecks 方法接受三个参数，除了 URL 和 options，还有一个响应过滤器（responseFilter）。
响应过滤器是一个函数，用于检查响应结果是否符合预期。如果响应结果不符合预期，那么可以通过该函数来执行相应的错误处理。
示例代码如下：
------ - ---------- - ---- --------------------
----- -------------- - ---------- -- -
-- ---------
-- ---------------- -- --- -- --------------- - --- -- ------------ -
------ ---------
- ---- -
----- --- --------------- --------
-
-
----- ------------------- - -- --
---------------------------
-----------------------------------------------
---
---------------
------------------------
--上述代码中，我们使用 fetchWithChecks 方法向指定的 URL 发起了一个 GET 请求，并对响应结果进行了判断。如果响应结果符合预期，那么会触发一个名为 FETCH_WITH_CHECKS_DATA 的 action，否则会抛出一个错误。
abortable
abortable 是一个用于支持请求终止的方法。它接受一个 fetch 方法作为参数，并返回一个新的 fetch 方法。返回的方法与原始的 fetch 方法类似，只是多了一个 abort 方法，用于终止请求。
示例代码如下：
------ - ---------- - ---- --------------------
----- -------------- - ----------------------------
----- ------------------ - -- --
--------------------------------------------------------------
---------------- -- ----------------
------------ -- --
----- -----------------------
-------- -----
----上述代码中，我们使用了 abortable 方法对 fetch 进行了增强，使其支持请求的中断。当请求的响应未返回时，我们可以调用 abort 方法来终止请求的发送。
总结
通过本文的介绍，我们了解了 redux-fetch-utils 这个工具库，并学到了如何使用它来简化 Redux 中的异步请求操作。
redux-fetch-utils 提供了一系列的方法，如 fetch、fetchJson、fetchWithChecks 和 abortable，每个方法都有各自的特点和适用场景。
通过将 redux-fetch-utils 引入到 Redux store 中，我们可以更加方便地进行异步数据获取和处理。
如果你想了解更多关于 redux-fetch-utils 的使用及其原理，可以查看它的官方文档和源代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700de361a36e0bce8cb9