前言
在实际开发中，我们经常会涉及异步操作，例如调用接口获取数据、异步验证等等。而 Redux Saga 便是一个非常好用的处理异步任务的库。本文将会详细介绍 Redux Saga 中如何实现异步任务，并配合示例代码帮助读者更好的理解。
Redux Saga 简介
Redux Saga 是一个 redux 中间件，它允许我们以同步的方式编写异步代码，更好的控制应用程序的副作用，并且可以更好的处理应用程序中的异步任务。
Redux Saga 基于 ES6 的 generator 函数，可以使我们以同步方式编写我们的异步代码。同时 Redux Saga 还提供了许多工具函数、内置的任务和错误处理等功能，极大的简化了我们的开发难度。
实现异步任务
在使用 Redux Saga 实现异步任务时，我们需要用到的是 takeEvery 和 call 这两个函数。
1. takeEvery 函数
takeEvery 函数就是用来监听我们指定的 action，当监听到 action 时就会执行相应的 Saga。
-- -------------------- ---- ------- ------ - --------- - ---- ------------ --------- ---------------- - -- ------ - --------- ------------- - ----- ------------------------ ---------- -
上述代码我们通过 takeEvery 函数监听了 SOME_ACTION，当监听到该 action 时就会执行 someSaga。
2. call 函数
call 函数可以使我们以同步的方式调用一个异步任务，例如 API 接口请求等等。
import { call } from 'redux-saga/effects'
function* someSaga() {
// 调用异步任务
const result = yield call(api.fetch, params);
// 处理异步任务返回值
}上述代码我们通过 call 函数调用了 api.fetch 异步任务，并传入了 params 参数。它们之间执行的顺序是同步的，即等到 api.fetch 执行完成后我们才会进入到后续代码块中。
示例代码
下面通过一个获取用户信息的示例代码演示如何利用 Redux Saga 实现异步任务：
-- -------------------- ---- -------
-- --------
------ ----- -------- - -----------
------ ----- ---------------- - -------------------
------ ----- --------------- - ------------------
-- ----------
------ ----- ------- - -- -- --
----- --------
---
------ ----- -------------- - --------- -- --
----- -----------------
-------
---
------ ----- ------------- - ------- -- --
----- ----------------
-----
---
-- --------
------ - ---------- ----- --- - ---- ---------------------
------ - --------- --------------- ------------- - ---- ------------
------ --- ---- --------
--------- ----------- -
--- -
----- ---- - ----- ------------------ -- -- --- ------
----- -------------------------- -- -- ------------------------ ---- -- ------- --- -----
- ----- --- -
----- ------------------------------ -- -- ----------------------------- ------- --- -----
-
-
--------- ---------- -
----- ------------------- ----------- -- -- -------- ------
-
------ ------- ---------
-- ------
------ ----- ------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
------------- ---- -------
-- ------
---
-
-- -----------
------ - ----------------- --------------- - ---- ------------
----- ------------ - -
----- -----
------ ----
--
------ ----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------------
------ -
---------
----- ---------------
------ ----
--
---- ----------------
------ -
---------
----- -----
------ ------------
--
--------
------ ------
-
--
-- --------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ - ----------- - ---- -------------
------ -------- ---- ----------
----- -------------- - -----------------------
----- ----- - ------------------------ ---------------------------------
-----------------------------
------ ------- ------上述代码我们通过 takeEvery 函数监听 GET_USER action，当该 action 被 dispatch 时就会执行 fetchUser 函数。在 fetchUser 函数中我们通过 call 函数调用 api.getUser 异步任务，当异步任务执行完成后我们通过 put 函数触发 getUserSuccess 或者 getUserFailed action，从而将返回值或者错误信息传入 reducer 中更新 state。
结论
通过本文的详细介绍，相信读者已经了解了在 Redux Saga 中如何处理异步任务。Redux Saga 作为一个非常好用的 redux 中间件，对于处理异步任务来说提供了非常好的解决方案。希望本文对读者有所帮助，也希望读者通过学习本文后能够更好的利用 Redux Saga 处理实际开发中的异步任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff9d491b0bf82c71ccf39c