前言
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
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗