React-Redux-Saga实现原理
本文的主题为 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);
});
