简介
redux-fetch-middleware 是一个 Redux 中间件，它将处理异步请求的流程转移到中间件中。它使用了 fetch API，可以简化异步请求的发起和管理，同时提供了可拓展的配置，可以满足不同场景下的异步处理需求。
安装
使用 npm 进行安装：
--- ------- ----------------------
使用方法
引入中间件
------ - ------------ --------------- - ---- -------- ------ --------------- ---- ------------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ -------------------------------- --
发起请求
通过 dispatch 发起请求：
------ - ----- - ---- ------------------------- ------------------------------
fetch 函数可以接收的参数包括以下内容：
url：请求的 URL 地址。
options：fetch 函数接收的第二个参数（详细信息参见 MDN 的 fetch 函数文档）。
meta：一个对象，用于传递请求相关的元数据信息。例如：
---------------------------- - ------- ------ -- - ----- ---------------------- ----
处理响应
请求成功时，中间件会自动将响应数据传递给 reducer 中相应的 action，例如：
-- ------
-
----- ----------------------
-------- - -- ---- -- --
----- - -- ---------- -- -
-
-- -------
------ ------- -------- ------------------ - ------------- ------- -
------ ------------- -
---- ----------------------
------ -
---------
------ --------------
--
--------
------ ------
-
-请求失败时，中间件会将错误信息转为一个包含 type 和 payload 字段的 action，例如：
-- ------
-
----- ----------------------
-------- --- -------------- --------
-
-- -------
------ ------- -------- ------------------ - ------------- ------- -
------ ------------- -
---- ----------------------
------ -
---------
------ --------------
--
--------
------ ------
-
-配置
redux-fetch-middleware 的默认配置可以满足大多数场景，但在特殊情况下可能需要自定义配置。在使用 applyMiddleware 引入 middleware 时，可以通过传递可选的配置对象来覆盖默认配置。例如：
------ - ------------ --------------- - ---- --------
------ --------------- ---- -------------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------
-----------------
-------- --------------------------
-------------------- -
-- ----------- -------- --
------ ---------
-
--
-
--baseUrl：发送请求时自动添加的基础 URL，方便在不同环境下切换域名。onResponse：处理响应的回调函数。它会接收一个 response 对象，返回一个新的 response 对象。可以在此函数中进行自定义的请求响应处理，例如在 response 中添加一些自定义的数据字段。
示例代码
这里提供一个使用 redux-fetch-middleware 向 API 发起请求并渲染数据的示例。假设我们有一个类似如下的 API：
--- ----------
返回一个包含文章列表的 JSON 数据：
-
-------- -
- ----- -- -------- ------ ------ ------- ----- --
- ----- -- -------- ------- ------ ------- ----- --
- ----- -- -------- ------ ------ ------- ----- -
-
-安装 redux-fetch-middleware：
--- ------- ----------------------
创建 Redux store，并引入 redux-fetch-middleware 中间件：
------ - ------------ --------------- - ---- -------- ------ --------------- ---- ------------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ -------------------------------- --
在组件中 dispatch 请求，并在渲染时使用返回的响应数据：
------ ------ - --------- - ---- -------- ------ - ------------ ----------- - ---- -------------- ------ - ----- - ---- ------------------------- -------- ---------- - ----- ----- - ----------------- -- ------------- ----- -------- - -------------- ------------ -- - ------------------------------ -- ------------ -- --------------- - ------ ---------------------- - -- ------------- - ------ ----------- ---------------------------- - ------ - ----- -------------------- -- - ---- -------------- --------------------- ---------------------- ------ --- ------ -- -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700de361a36e0bce8cad