最近在帮着同事写一些页面，处理 redux 异步请求的中间上，同事用的 redux-saga，对于一直用的简单好理解的 redux-thunk 的我来说，这确算一个新鲜玩意儿了，好歹同事自己搭的脚手架里 reducer啊，路由啊什么的都是处理好了的，对于 saga 的部分照着他现写的代码 copy 下改改命名和 api 就差不多了。帮着写了三两个页面之后，发现：龟龟， Generator 里 yield 表达式将异步当成同步来写，这也太舒服了，反正是用了之后感觉 promise.then(...).then(...)....catch(...)再不想碰了，就像之前从写 ajax 了解到 Promise 之后再不想碰 ajax 的感觉一样。其实说到底，感觉 Promise 的链式调用还是会遇到回调地狱差不多的困境，then() 里面有时候还是很难避免会有 then() 的情况（可能是自己对 Promise 的理解太浅），所以现在遇到几乎和同步一样的异步写法当然很快就被俘获。好了，先来看看 redux-saga 依赖的核心 Generator。
Generator
简单的从两个方面入手：
- Generator 是什么？
- Generator 有什么用？
Generators are functions that can be paused and resumed (think cooperative multitasking or coroutines), which enables a variety of applications.
Two things distinguish genFunc from a normal function declaration:
It starts with the “keyword” function*.
It can pause itself, via yield (line B).
先看 Generator 是什么?
Generators are functions that can be paused and resumed (think cooperative multitasking or coroutines), which enables a variety of applications.
这里的 Generator 指的是一个函数，什么样的函数？可以被暂停和继续执行的函数。与普通函数的不同之处在于：
- Generator 函数以关键字
function*开始。 - 它可以暂停自己的执行，通过内部的 yield 表达式，然后通过返回的对象调用 next() 方法继续执行。
所以对 Generator 的调用并不会立即执行此函数内部的代码，而是返回一个所谓的 generator 对象 ，那这个所谓的 generator 对象又是什么呢，在前面JavaScript 里的 Iteration，简单了解一下
里我们初步了解了 JS 里的 Iterator，回顾一下 iterator 的接口：
interface Iterator {
next() : IteratorResult;
}
interface IteratorResult {
value: any;
done: boolean;
}
这里的 generator 对象也是一个 iterator（同时也是个 iterable），通过一个简单的例子证明之：
const genFunc = function* () {
yield 1
yield 2
yield 3
}
const gen = genFunc()
console.log(gen)
先不看那些有点绕的原型关系，可以看到在 gen 的原型链上有 [Symbol.iterator] 方法和 next() 方法，说明 gen 很有可能是一个 iterable，同时也是 iterator，不出意外 gen[Symbol.iterator]() 返回的是 gen 本身，再调用 next() 看看会得到什么：
gen.next() // {value: 1, done: false}
gen.next() // {value: 2, done: false}
gen.next() // {value: 3, done: false}
gen.next() // {value: undefined, done: true}
可以看到返回的对象就是符合 IteratorResult 接口的， 对象的 value 就是关键字 yield 后面跟的内容。其实 gen 对应的 iterator 里的数据来源就是 yield，我们可以通过扩展操作符看一下：
console.log([...gen])
可以看到，
[...genFunc()] (可以用
... 操作符操作的原因是 genFunc() 同时也是一个 iterable )返回的是一个数组，然后再对被
... 操作后的 generator 对象调用
next() 发现返回的是
{value: undefined, done: true} 这个结果倒是之前并不知道的，原来
... 会对 generator 对象进行一次遍历操作，而不是单单返回一个数组就完事，它还改变的 generator 对象的遍历状态。
但是并不是 所有 yield 后面的值都会被 next() 返回：
function* generator(i) {
yield i;
yield i + 10;
if (i > 10) yield 10
}
[...generator(1)] // [1, 11]
[...generator(11)] // [11, 21, 10]
只有被执行到的 yield，其后面的 value 才会被遍历到。
还是那张截图，除 next() 方法之外，同时还有 return() 和 throw() 两个方法，上面说的是 generator 对象通过 yield 向外部提供数据，可以看成是一个 Producer，下面我们就借此来简单了解一下 generator 对象的另一种功能，作为 Consumer。
还是简单的看个例子：
const genFunc = function* () {
const r1 = yield 1
console.log(r1)
const r2 = yield 2
console.log(r2)
const r3 = yield 3
console.log(r3)
}
const gen = genFunc()
gen.next()
gen.next('second next()') // console: 'second next()'
gen.next('third next()') // console: 'third next()'
gen.next('fourth next()') // console: 'fourth next()'
可以看到 next(value) 里的 value 会成为对应 generator 里前一个 yield 表达式的返回值，即第二个 next(value) 可以把值传给 generator 的第一个 yield，依次类推，这时候应该所有人都会想第一个 next 里的 value 会传给谁呢？不会传给谁，会被忽略。当然，可以通过对 generator 包装一下可以实现对第一个 next(value) 里 value 应用（其实不止如此，可以通过对 generator 包装而实现更多的功能），但是目前这块暂不去深入。
与 next() 相比，return() 的作用是类似的，next 可以传值，return 也可以传，不同之处在于 return 会将当前 generator 对象的状态置为 closed，即对generator 对象调用 return 后，对应 generator 函数内部后续在未调用 return 的情况下正常生效的 yield 表达式都会被忽略，即调用 return 后，后面再调用 next() 返回的都是 {value: undefined, done: true}，还是上一个例子：
const gen = genFunc()
gen.next()
gen.next('second next()') // console: 'second next()'
gen.return('lalala') // return {value: ‘lalala’, done: true}
gen.next('调用也没用') // return {value: undefined, done: true}
可以看到与 next() 相比，return() 传值的方式也不一样， next 是将值转给 generator 里面的 yield 表达式，而 return 是将值传到返回的 iteratorResult 对象的 value 字段。
而 throw() 则跟 return() 的作用又有相似之处，都可以改变当前 generator 对象的遍历状态，即将 generator 对象的状态置为 closed，但是 throw() 传出来的是一个异常，当 throw() 被包含在 try 语句里时，这个 throw 会被对应的 catch 捕捉到。
关于 generator 是什么，基本的就是这些了，下面来看下：
generator 能做什么
看看 redux-saga 的作用就知道 generator 能做什么了，比如下面的一个 saga 函数：
function* getData() {
const data = yield call(getD, 'http://localhost:3000/a');
yield put({
type: 'GET/SAVE',
list: data
});
}
它的作用是通过 getD('http://localhost:3000/a') 这个调用去请求一个数据，显然这是异步的，如果没有其前面的 yield 的话，后面的 yield put 会立即执行，显然 此时的 data 的值必然不是我们想要的，但是有了 yield 之后我们得以在 getD('http://localhost:3000/a') 结果返回之后再去执行后面的 put，这就使得一切都像同步代码一下，一条一条执行，异步的代码在返回结果之后再继续执行后面的代码。我们知道 generator 对象必须要调用其 next() 方法才能使得对应 generator 的 转到下一个 yield 表达式处开始执行，而这里我们只需调用 dispatch({type: 'GET/GETDATA', payload: {list: data}}) 就可以让 getData 里的一切自动执行，这是怎么做到的呢？这应该涉及到 redux-saga 中间件的实现原理，这里我们暂时不去深究。下面我们来了解一下 async 函数好 await 表达式。
async
还是从两个简单的问题开始：
- async 函数是什么
- async 函数能做什么
The
async functiondeclaration defines an asynchronous function, which returns anAsyncFunctionobject.
----- from wiki
async 函数是由 async function 声明定义的一个异步函数，这个异步函数以 AsyncFunction 对象为原型。原型先不去关心，这个异步函数与普通函数相比有何不同？
- 它的返回值是一个Promise 对象，对象以异步函数的返回值为 resolve 的值，或者以异步函数里抛出的异常为 reject 的值。
- 它里面可以（也只能在它里面）使用 await 表达式，await 表达式的意义是等待 await 后面的表达式返回一个 Promise 对象的处理结果。如果 await 处理的值不是 Promise 对象，则返回该值本身。
例子：
function resolveAfter2Seconds(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function add1(x) {
const a = await resolveAfter2Seconds(20);
const b = await resolveAfter2Seconds(30);
const {c} = await { c: 10}
return x + a + b + c;
}
add1(10).then(v => {
console.log(v); // prints 70 after 4 seconds.
});
可以看到，当函数 add1(10) 执行到第一条语句时，await 后面的 Promise，两秒后 Promise resolve 出 20，将 20 赋值给 a，执行第二条语句，再等两秒后将 30 赋值给 b，最后 return Promise.resolve(70)。
此处应该会联想到 Generator 的吧，二者形式上十分相近，* 对应 async，yield 对应 await，但比起 Generator 来 async 函数似乎更「智能」一些，一旦执行 async 函数，里面的代码都会自动执行，虽然遇到 await 也会停，但是停了之后自己又会自动去执行，而不像 Generator 每次暂停都需要手动执行 generatorFun().next() 才能继续。虽然 async 更加「智能」了，但是自然不如 Generator 灵活，因为 async 实际是由 Generator 和 Promise 一起实现的语法糖，对 Generator 加了限制而成的 async 在灵活性自然比不上什么限制都没有的原本 Generator，既然 Generator 可以和 Promise 组合而实现 async，那么必然就可以和其他的什么组合而成另外的一些东西，比如暂时还不知道实现原理的 redux-saga。
最后再举个简单例子说明用 async 函数写异步会有多舒服，比如我们需要先从一个地方去访问一个数据，得到这个数据后在那这个数据去访问另一外一个数据：
async function getData(url) {
const res1 = await fetch(url)
const url1 = await res1.json()
const res2 = await fetch(url1)
const data = await res2.json()
return data
}
getData(url).then(...).catch(...)
这样的写法多么清楚、一目了然。
暂时只是了解了 Generator 和 async 函数的作用，后面应用时继续加深理解。