redux-api-middleware是一种简单而有用的中间件，它在Redux应用程序中为API交互提供了标准化的、声明性的方法。在这篇文章里，我们将会学习如何使用npm包@migueloller/redux-api-middleware，并探索它的一些高级用法，以及如何将它应用于你的React/Redux项目中。
安装
npm包@migueloller/redux-api-middleware安装很简单，请在你的终端中键入以下命令:
npm install @migueloller/redux-api-middleware
使用
让我们先看一个基本的示例，使用redux-api-middleware来处理一个简单的GET请求。在这个例子中，我们将使用一个React应用程序，并将Redux框架集成到其中。
异步操作
首先，我们将需要在Redux store中引入redux-api-middleware。这可以通过创建一个middleware对象来实现，直接调用redux-api-middleware的内置API即可。
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
------ - ------------- - ---- ------------------------------------
------ ----------- ---- --------------
------ ------- -------- ------------------------------ -
------ ------------
------------
---------------
------------------------------
--
-然后，让我们使用该中间件来处理一个异步请求，例如在组件装载时从浏览器中的JSON文件中获取一些数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- -------- - ---- -------------
----- ------------ ------- --------------- -
------------------- -
----------------------
----------------------
-
-------- -
----- - ---- --- - - -----------
------ -
-----
--------- -----------
--------- -----------
------
--
-
-
----- --------------- - ----- -- --
---- ----------
---- ---------
---
----- ------------------ - -
---------
--------
--
------ ------- ------------------------ ----------------------------------现在，我们将需要使用redux-api-middleware来处理网络请求。在这里，我们将使用一个简单的JSON文件，假设你的应用是由Webpack打包后运行在文件系统中。dispatch()方法内面使用了actionCreators。fetchCat()和fetchDog()为其内部使用的。
-- -------------------- ---- -------
------ -------- ---------- -
------ -
------- -
--------- -----------------
------- ------
------ -
------------------
------------------
-----------------
-
-
--
-
------ -------- ---------- -
------ -
------- -
--------- -----------------
------- ------
------ -
------------------
------------------
-----------------
-
-
--
-参数
- endpoint：网络请求的一个URL或者URI。
- method：请求方法，请求方法必须是一个字符串全部大写，可以是GET、POST、PUT、DELETE等。
- types：一个描述网络请求状态的有序数组，成功的状态通过数组的第二项表示，而client和error状态则需要指定为数组的第一项和第三项。如果你只需要请求成功的状态，则可以设置如下：
[REQUEST, SUCCESS, FAILURE]
高级用法
除了上述的基本用法，redux-api-middleware还支持一些高级用法，例如中断请求或者使用自定义的fetch实现。下面是一些示例：
带有中断请求的网络请求
-- -------------------- ---- -------
----- ---------- - --- ------------------
----- - ------ - - -----------
-------- ---------- -
------ -
------- -
--------- ----------
------- ------
-------
------ -
- ----- ----------------- --
-
----- ------------------
-------- ----- -------- ------ ---- -- -
----- ---- - ----- -----------
------ -----
-
--
- ----- ----------------- -
-
-
--
-
--------------------- -- -------- -- ------ -- ----- --- -------
------------------- -- ----- --- -------使用自定义fetch实现
如果你需要使用自己的fetch实现，则仅需在配置对象中添加一个fetch字段即可。
-- -------------------- ---- -------
------ -------- ---------- -
------ -
------- -
--------- ------------
------- ------
------ ------------
------ -
------------------
------------------
-----------------
-
-
--
-使用自定义处理程序
你还可以定义自己的处理程序，例如添加自定义的错误处理和成功处理。
-- -------------------- ---- -------
------ - ------------- - ---- ------------------------------------
------ - ------------------ ------------------ ----------------- - ---- ------------
------ ------- ---------------
------ ------------
--------------- -
-------------------- -------- ------ ---- -- -
--------------------- --------------
------ -----------
--
-------------------- -------- ------ ---- -- -
--------------------- --------------
------ -----------
-
-
---
-------- ------------------- -
------ ----- -------- -- -
--------------------- ------- -----
------ ----------- ---------
--
-结论
redux-api-middleware可以极大地简化Redux编程过程中的网络请求部分。在本文中，我们了解了如何使用这个包，并学习了一些高级用法，例如中断请求、自定义fetch实现和自定义处理程序。如果你正在构建一个React/Redux应用，redux-api-middleware是一个非常有价值的npm包，值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447a4