在前端开发中，管理状态存储是非常必要的一项工作。Redux 是一个常用的状态管理库，它可以帮助我们更好地组织和管理应用的状态。当我们需要调用异步操作时，Redux-Awaiter 这个 npm 包就可以派上用场了。本文将为你介绍 Redux-Awaiter 的使用教程。
Redux-Awaiter 是什么
Redux-Awaiter 是一个 Redux 的中间件，它用于拦截异步请求并将其分为三种情况：开始异步请求、异步请求成功和异步请求失败。这个 npm 包通过派发一个状态对象来帮助我们更好地管理异步请求的状态。
如何使用 Redux-Awaiter
Redux-Awaiter 的使用非常简单，只需要在 store 中将它绑定为中间件即可。以下是如何使用 Redux-Awaiter 的示例代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------------- ---- ---------------- ----- ----- - ------------ ------------ ---------------------------------- -- ------ ------- ------
这里的 applyMiddleware 方法将 Redux-Awaiter 中间件绑定到了 store 中，这样就可以开始使用 Redux-Awaiter 了。
如何发起异步请求
在 Redux-Awaiter 中，你需要使用 Promise 来发起异步请求。以下是如何使用 Promise 发起异步请求的示例代码：
-- -------------------- ---- -------
------ ----- ------------- - -- -- -
------ -------- -- -
---------- ----- ---------------- ---
---------------------------------------------
-------------- -- -
---------- ----- ------------------------- -------- ------------- ---
--
------------ -- -
---------- ----- ----------------------- -------- ----- ---
---
--
--这里的 fetchProducts 函数返回了一个 dispatch 函数，当它被调用时，它会派发一个“FETCH_PRODUCTS”类型的 action，表示异步请求已经开始。之后，调用 axios.get 方法去请求数据，在请求成功或者失败后，都会派发相应的 action 来表示异步请求的结果。
监听异步请求状态
在使用 Redux-Awaiter 时，你可以通过监听 state 中的特定值来判断异步请求的状态。以下是一个简单的异步请求状态监听的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- ------------ ------- --------- -
-------- -
----- - --------- ---------- ----- - - -----------
-- ----------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
----
--------------------- -- -
--- -----------------
--------------
-----
---
-----
--
-
-
----- --------------- - ----- -- -
------ -
--------- ---------------
---------- -----------------------------------
------ ------------------------------
--
--
------ ------- ---------------------------------------这里的 mapStateToProps 函数将状态映射到了组件的 props 中，包括了产品列表、请求是否正在加载中以及请求是否出现错误。state.awaiters 和 state.errors 对象都是 Redux-Awaiter 自动生成的，它们可以通过派发相应的 action 来更新状态。
总结
本文中我们介绍了如何使用 Redux-Awaiter 来管理异步请求。我们学习了如何在 store 中绑定 Redux-Awaiter 中间件、如何使用 Promise 发起异步请求以及如何监听异步请求状态。Redux-Awaiter 可以帮助我们更好地组织和管理异步请求的状态，希望本文能够对你理解和应用它有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669d81e8991b448e2d5b