随着前端应用的复杂性不断增加，单纯地使用 Redux 这样的状态管理库已经不能满足需求了，所以出现了 Redux-Saga 这样的中间件，用于处理异步逻辑和复杂场景。本篇文章主要介绍如何进阶使用 Redux-Saga，具体包括如何处理复杂场景和异常，让 Redux-Saga 更加适用于实际开发中的业务需求。
复杂场景处理
处理并行异步请求
在实际开发中，可能会遇到需要同时发起多个异步请求的情况。Redux-Saga 提供了 yield all([]) 用于处理并行异步请求。
-- -------------------- ---- -------
------ - ---- ---- - ---- ---------------------
------ - ---------- ---------- - ---- --------
--------- -------- -
----- ------ ------ - ----- -----
----------------
----------------
---
----------------- -------
-上述代码中，使用了 yield all([]) 来同时发起 fetchUser 和 fetchPosts 两个异步请求，等到两个请求都完成后才会执行后续操作。
处理条件分支
有时候需要根据某个状态的不同值来执行不同的异步操作。比如当用户登录成功后，需要执行获取用户信息和获取用户订单的两个异步操作。这时可以使用 yield fork 和 yield join 结合的方式来处理。
-- -------------------- ---- ------- ------ - ----- ---- - ---- --------------------- ------ - -------------- --------------- - ---- -------- --------- -------- - ----- ----- - ----- -------------------- ----- ----- - ----- ---------------------- ----- ----------- ------- -
上述代码中，使用 yield fork 分别启动了两个异步请求，然后使用 yield join 等待两个请求都完成后再继续执行后续操作。
异常处理
处理网络异常
在实际开发中，经常会遇到因为网络异常导致请求失败的情况。此时我们通常需要对请求失败的情况进行处理，比如提示用户网络连接失败。Redux-Saga 的 call 方法提供了一个很好的异常处理机制，我们可以在调用异步请求时使用 try...catch 来捕获异常，并进行相应的处理。
-- -------------------- ---- -------
------ - ---- - ---- ---------------------
------ - ---------- - ---- --------
--------- -------- -
--- -
----- ----- - ----- -----------------
- ----- ------- -
---------------------------
-- -------
-
-上述代码中，使用 try...catch 来捕获异常，如果请求失败，那么就会执行 catch 中的逻辑。我们可以在 catch 中做一些异常处理的逻辑，比如提示用户网络连接失败等。
处理业务异常
在实际开发中，可能会遇到后端返回的错误码，需要我们根据错误码来进行相应的处理。这时我们可以在异步请求中通过 put 派发一个 action，然后在 reducer 中进行相应的处理。
-- -------------------- ---- -------
------ - ----- --- - ---- ---------------------
------ - ----------- - ---- --------
------ - ------------------- ------------------ - ---- ------------
--------- -------- -
--- -
----- ------ - ----- ------------------
----- --------------------------------
- ----- ------- -
----- ---------------------------------------
-
-上述代码中，我们使用 call 来调用异步请求，如果请求成功则使用 put 来派发 fetchOrdersSuccess action，如果请求失败则派发 fetchOrdersFailure action。在 reducer 中我们可以根据不同的 action 来做相应的处理。
总结
Redux-Saga 是一个强大的工具，可以用于处理异步逻辑和复杂场景。在处理复杂场景时可以使用 yield all([]) 和 yield fork 结合的方式来处理，可以让我们更加灵活地控制异步操作。在处理异常时可以使用 try...catch 和 put 来进行异常处理和业务逻辑的处理。通过学习本篇文章，相信大家对 Redux-Saga 的进阶使用都会更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1809248841e9894dbff77