最近在帮着同事写一些页面，处理 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)

image.png

先不看那些有点绕的原型关系，可以看到在 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])

image.png

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 function declaration defines an asynchronous function, which returns an AsyncFunction object.
----- 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 函数的作用，后面应用时继续加深理解。