前言
随着前端项目的复杂度不断提高，数据交互的工作也变得越来越复杂，常常需要进行异步请求，请求过程可能需要多次交互，如果使用原生的 fetch、axios 等，代码会变得非常冗长、难以维护，此时可以使用 redux-api-middleware 这个第三方库来有效地管理异步请求。
本文将介绍一款针对 redux-api-middleware 的增强工具包 redux-api-middleware-addon，该工具包提供了一些额外的功能，可以更加方便地处理异步请求。
安装
在使用本工具包之前，需要先安装 redux-api-middleware。
使用 npm 安装：
npm install redux-api-middleware
使用 yarn 安装：
yarn add redux-api-middleware
接着再安装官方提供的 redux-api-middleware-addon：
npm install redux-api-middleware-addon
或者
yarn add redux-api-middleware-addon
使用
Middleware
首先，在创建 store 时，在 applyMiddleware 中加入 redux-api-middleware 和 redux-api-middleware-addon：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------- - ---- -----------------------
------ - ---------------- -- ------------------- - ---- -----------------------------
------ ----------- ---- -------------
----- ------------------- - -
------- -------
------------------ ----------
---------------- -------
--
----- ----- - ------------
------------
----------------
----------------------------------- -- --------------------
---------------------------------------- -- --------------------------
-
--Action
redux-api-middleware-addon 提供了 createApiAction 方法，我们可以使用这个方法来创建 action。
基本用法
import { createApiAction } from 'redux-api-middleware-addon';
export const fetchUserInfo = createApiAction({
type: 'FETCH_USER_INFO',
method: 'GET',
endpoint: '/user/info',
});上面的代码创建了一个叫做 fetchUserInfo 的 action，请求类型为 GET，请求地址为 /api/user/info。
更多配置
-- -------------------- ---- -------
------ - --------------- - ---- -----------------------------
------ ----- ------------- - -----------------
----- ------------------
------- ------
--------- -------------
-- ----
-------- -
-------------- ------- ----
--
------ -
--- ---
--
----- -
----- ------
--
----- -
----- -----
-
---上面的代码中，headers 配置了请求头信息，query 配置了查询参数，body 配置了请求体信息，meta 配置了额外的 meta 信息。
处理响应
redux-api-middleware-addon 提供了 onSuccess 和 onError 两个方法方便我们对响应结果进行处理。
-- -------------------- ---- -------
------ - --------------- - ---- -----------------------------
------ ----- ------------- - -----------------
----- ------------------
------- ------
--------- -------------
-- ----
---------- ---------- --------- --------- -- -
----------------- ----------
--
-------- ------- --------- --------- -- -
----------------- -------
-
---自定义 reducer
如果我们需要对请求结果进行一些额外的操作，可以使用 handleAction、handleError 和 handleSuccess 方法。
-- -------------------- ---- -------
------ - ---------------- ------------ - ---- -----------------------------
------ ----- ------------- - -----------------
----- ------------------
------- ------
--------- -------------
-- --- -------
-------- -------------
------------------
------- ------- -- -
------ -
---------
--------- --------------
--
-
-
---上面的代码中，我们通过 reducer 参数传入了 handleAction 方法创建的 reducer，当请求成功时，会更新 state 中的 userInfo 属性。
示例
-- -------------------- ---- -------
------ - ---------------- ------------ - ---- -----------------------------
------ ----- ------------- - -----------------
----- ------------------
------- ------
--------- -------------
-------- -
-------------- ------- ----
--
------ -
--- ---
--
----- -
----- ------
--
---------- ---------- --------- --------- -- -
----------------- ----------
--
-------- ------- --------- --------- -- -
----------------- -------
--
-------- -------------
------------------
------- ------- -- -
------ -
---------
--------- --------------
--
-
-
---
-- ------ -------
------------------- -
----- - -------- - - -----------
--------------------------
-总结
通过本文的介绍，我们了解了如何使用 redux-api-middleware-addon 来更加便捷地处理异步请求，在实际开发中非常有用。希望本文对前端同学们有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737981e8991b448e969e