前言
React-Redux-Saga是一个用于处理Redux异步操作的中间件，它的实现原理基于生成器函数（Generator Functions）和事件监听模式。
本文的主题为 saga 的实现原理，那么与其说 sage 的实现原理，不如说在 saga 中如何通过 yield 获取异步返回的结果，在 React-Saga 中如何通过 yield 获取到数据之前，我还是建议去把博主在 JS新特性+流程框架 标签中编写的 Generator 函数文章进行观看一遍，这样对于阅读本文会更加的简单。
好了，废话不多了，首先来看几个示例，对应的这几个案例分别说明了几个注意点，然后我们在实现 saga 中通过 yield 获取异步数据的底层实现代码，第一个示例如，定义了一个生成器函数, 这个函数保存了 3 个状态：
function* gen() { yield '123'; yield '456'; yield '789'; }
然后只要执行生成器函数, 就会拿到一个可迭代对象：
const result = gen(); console.log(result);
注意点：
- 执行生成器函数并不会执行对应的函数体
- 只要调用一个
next方法, 就会执行一个yield
console.log(result.next()); console.log(result.next()); console.log(result.next());
然后呢，如上的这个示例就先过了，继续往下看第二个示例，也是定义了一个生成器函数：
function* gen() { console.log('1 + 1'); yield 1 + 1; console.log('2 + 2'); yield 2 + 2; console.log('3 + 3'); yield 3 + 3; }
这里有一个注意点需要强调下，每次调用 next 方法执行的是当前对应 yield 和上次 yield 之前所有的代码。
const result = gen(); console.log(result.next()); console.log(result.next()); console.log(result.next());
示例二结束，示例三开始：
function* gen() { const a = yield 1 + 1; console.log('a = ', a); const b = yield 2 + 2; console.log('b = ', b); const c = yield 3 + 3; console.log('c = ', c); } const result = gen(); console.log(result.next()); console.log(result.next());
如上代码，在博主运行之后发现结果如下：
首先看第一个 { value: 2, done: false } 说明是我们第一个 yield 执行得到的结果，然后我又再次执行了 next 然后按照如上所说每次调用 next 方法执行的是当前对应 yield 和上次 yield 之前所有的代码，可以得出我们的 a 打印代码会被执行了，然后发现是 undefined，这又是为啥呢？这里就要强调一个注意点了，默认情况下并不会将 yield 的执行结果赋值给某个变量，在生成器函数中如果想给上一次 yield 对应的变量赋值，那么就必须在下一次调用 next 的时候给 next 传参，生成器函数会将下一次 next 传递的参数作为上一次 yield 变量的值，然后我们的代码就可以演变为如下的样子：
const a = result.next(); const b = result.next(a.value); const c = result.next(b.value); const d = result.next(c.value);
好了三个示例说完了，接下来就是具体的实现代码了, 首先定义了一个生成器函数，模拟获取异步数据的场景：
function* gen() { const data = yield new Promise((resolve, reject) => { setTimeout(() => { resolve('abc'); }, 3000) }); console.log('生成器函数中的data = ', data); }
然后调用定义的函数获取异步数据，然后在通过拿到的可迭代对象调用 next 方法将获取到的方法，传递给上一次 yield 进行变量赋值，然后我们在自定义生成器函数的 yield 当中就获取到异步数据了从而实现了 saga 中在 yield 中获取异步数据的过程啦最后部分的代码如下：
const result = gen(); result.next().value.then((data) => { result.next(data); });
推荐阅读: https://zhuanlan.zhihu.com/p/37356948
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
