在前端应用中，异步请求是一项非常重要的技术。Redux 作为状态管理工具，也需要处理异步请求。本文将介绍 Redux 中异步请求的一些常见问题，并提供解决方案和示例代码。
1. 如何在 Redux 中发起异步请求
在 Redux 中发起异步请求通常使用中间件。目前比较流行的中间件有 redux-thunk、redux-saga 和 redux-observable 等。以 redux-thunk 为例，我们可以使用以下代码来定义一个异步 action：
-- -------------------- ---- -------
-- -- ------
----- --------- - -- -- ----- -------- -- -
------------------------
--- -
----- ---- - ----- ---------------------------------
----------------------------
- ----- ------- -
------------------------------
-
--
-- -- ------
----------------------在上面的代码中，我们使用 async/await 语法来处理异步请求，并根据请求成功或失败的情况分别触发 requestData 和 receiveData 或 requestError action。
2. 如何实现请求的 loading 状态
在实际使用中，我们可能需要在请求数据时显示一个 loading 状态。为了实现 loading 状态，我们需要再定义一个 requestStart action：
-- -------------------- ---- -------
----- ------------ - -- -- -- ----- --------------- ---
----- ----------- - -- -- -- ----- -------------- ---
----- ----------- - ---- -- -- ----- --------------- -------- ---- ---
----- ------------ - ----- -- -- ----- ---------------- -------- ----- ---
----- --------- - -- -- ----- -------- -- -
-------------------------
--- -
----- ---- - ----- ---------------------------------
----------------------------
- ----- ------- -
------------------------------
-
--在上面的代码中，我们定义了 requestStart 来表明请求数据的开始，requestData 来表明数据请求成功，requestError 来表明请求失败。
我们可以在 UI 层使用 requestStart 来显示 loading 状态，requestData 来更新 UI，requestError 来显示错误信息。
3. 如何处理多个请求的 loading 状态
如果我们需要同时发起多个异步请求，我们该如何处理它们的 loading 状态呢？一种可能的解决方案是使用一个计数器来记录当前正在请求的请求数量：
-- -------------------- ---- -------
----- ------------ - -- -- -- ----- --------------- ---
----- ---------- - -- -- -- ----- ------------- ---
----- --------- - -- -- ----- ---------- --------- -- -
----- - ----------- - - -----------
-- ------------ --- -- -
-------------------------
-
--- -
----- ---- - ----- ---------------------------------
----------------------------
- ----- ------- -
------------------------------
- ------- -
----- - ----------- - - -----------
-- ------------ --- -- -
-----------------------
-
-
--在上面的代码中，我们使用一个 numRequests 变量来记录当前正在请求的请求数量，并对 startRequest 和 endRequest 进行相应的修改。
需要注意的是，getState 方法可以用来获取当前 state 的值，在异步 action 中可以使用它来获取当前请求数量。
4. 如何处理并发请求
有时我们需要同时发起多个请求，但又需要等待所有请求返回结果后再更新 UI。在这种情况下，我们可以使用 Promise.all 来并发执行多个请求：
const fetchData = () => async dispatch => {
const usersPromise = fetch("http://example.com/users");
const postsPromise = fetch("http://example.com/posts");
const [users, posts] = await Promise.all([usersPromise, postsPromise]);
dispatch(receiveData({ users, posts }));
};在上面的代码中，我们同时发起了两个请求，使用 Promise.all 包装后等待两个请求返回结果后再分别触发 receiveData action。
5. 如何处理请求的取消
有时用户可能会在请求数据时取消请求。为了处理请求的取消，我们需要为请求定义一个唯一的标识符，并在取消请求时使用这个标识符：
-- -------------------- ---- -------
-- -- ------ -------
----- --------- - --------- -- ----- -------- -- -
----------------------------------
--- -
----- ---- - ----- ---------------------------------
------------------------------- -------
- ----- ------- -
-------------------------------- --------
-
--
-- ----
----- ------------- - --------- -- -- ----- ----------------- -------- --------- ---在上面的代码中，我们为每个请求定义了一个唯一的标识符，异步 action 在传入标识符后，根据标识符来发起请求。
当用户取消请求时，我们需要发送一个 CANCEL_REQUEST action，并使用标识符来标识要取消的请求。在 reducer 中，我们需要根据标识符来判断是否取消当前请求。
-- -------------------- ---- -------
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------
------ - --------- -------- ---- --
---- -----------------
-- --------------- --- ---------------- -
------ - --------- -------- ------ --------- ---- --
-
------ ------
---- ------------------
-- ------------------------- --- ---------------- -
------ - --------- -------- ------ ----- ------------------- --
-
------ ------
---- ----------------
-- ------------------------- --- ---------------- -
------ - --------- -------- ------ ------ -------------------- --
-
------ ------
--------
------ ------
-
--在上面的代码中，我们根据标识符来判断是否取消当前请求，并在 reducer 中做相应的状态更新。
总结
通过本文，我们了解了 Redux 中异步请求的一些常见问题，并提供了解决方案和示例代码。以上解决方法均可使用 redux-thunk 实现，也可以使用其他中间件来实现相应的功能。在实际使用中，需要考虑到更多的场景和细节，以便更好地处理异步请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482300548841e989419e3e3