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