在前端开发中，与后端的交互过程中，请求数据的流程是必不可少的。Redux-fetch-api 是一款可以简化数据请求处理过程的轻量级库，通过它可以轻松实现请求、成功回调和错误处理等各种相应的操作。
本文将详细介绍 Redux-fetch-api 的使用方法，帮助初学者从零开始了解它的基本操作，也会通过相应的示例代码在使用中加以说明。
安装
安装 Redux-fetch-api 很简单，只需要打开终端输入以下命令即可：
npm install redux-fetch-api --save
基本使用
Redux-fetch-api 提供了两个函数，fetchAPI 和 createReducer。
它们分别扮演着请求数据和数据处理的角色。
我们首先需要给它们传递一些参数，分别是请求的 url、请求的方法和回调等等，然后使用 redux 中间件处理数据请求，即可成功得到请求的响应数据。
fetchAPI
fetchAPI 函数使用时需要传入一个配置对象，包括以下参数：
| 参数 | 说明 |
|---|---|
url |
要请求的 url |
method |
请求方式（默认为 'GET'） |
headers |
请求头 |
body |
请求体 |
onSuccess |
请求成功后的回调函数 |
onError |
请求失败后的回调函数 |
onStart |
请求开始时的回调函数 |
onFinish |
请求结束时的回调函数 |
-- -------------------- ---- -------
------ - -------- - ---- ------------------
------ ----- ------------ - -- -- -
------ ----------
---- --------------------------------
------- ------
---------- -------- -- -
------------------------ ----------
--
-------- ----- -- -
--------------------- -------
--
-------- -- -- -
---------------- ------- ----------
--
--------- -- -- -
---------------- ------- -----------
-
---
--createReducer
createReducer 函数用于将请求的数据统一存储到 redux store 中，方便后续的使用。我们可以根据服务器返回的结果类型，将结果处理成不同的状态并存储到对应的 store 中。
-- -------------------- ---- -------
------ - ------------- - ---- ------------------
----- ------------ - -
------ ---
-------- ------
------ -----
--
----- ------------ - ------------------------------- -
-------- ----- -- -
------ - --------- -------- ---- --
--
---------- ------- ------- -- -
------ - --------- ------ --------------- -------- ----- --
--
-------- ------- ------- -- -
------ - --------- ------ --------------- -------- ----- --
--
---
------ ------- -------------可以看到，我们使用 createReducer 函数将请求到的数据以及请求状态存储到了返回的 state 对象中，并在不同状态下进行了不同的处理。
示例代码
以下是使用 Redux-fetch-api 发送请求以及在 React 组件中展示数据的示例代码。
数据请求
-- -------------------- ---- -------
------ - -------- - ---- ------------------
------ ----- ------------ - -- -- -
------ ----------
---- --------------------------------
------- ------
---------- -------- -- -
------------------------ ----------
--
-------- ----- -- -
--------------------- -------
--
-------- -- -- -
---------------- ------- ----------
--
--------- -- -- -
---------------- ------- -----------
-
---
--Redux reducers
-- -------------------- ---- -------
------ - ------------- - ---- ------------------
----- ------------ - -
------ ---
-------- ------
------ -----
--
----- ------------ - ------------------------------- -
-------- ----- -- -
------ - --------- -------- ---- --
--
---------- ------- ------- -- -
------ - --------- ------ --------------- -------- ----- --
--
-------- ------- ------- -- -
------ - --------- ------ --------------- -------- ----- --
--
---
------ ------- -------------React 组件
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------ - ---- ------------
------ ------- ---- ------------
----- -------- - -- ------ -------- ------ ------------ -- -- -
------------ -- -
---------------
-- ----
-- --------- -
------ -------- ---
-
-- ------- -
------ ----------- --------------
-
------ -
----
--------------- -- -
--- --------------
----------- --------------
-----
---
-----
--
--
----- --------------- - ----- -- -
------ -
------ -------------------------
-------- ---------------------------
------ -------------------------
--
--
------ ------- ------------------------ - ------------ -------------以上就是使用 Redux-fetch-api 实现数据请求和数据处理的简单示例代码。通过阅读本文，相信您可以轻松掌握 Redux-fetch-api 库的原理和使用方法，从而在实际项目中灵活运用它，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ca8
