JavaScript异步编程：Generator与Async
从Promise开始，JavaScript就在引入新功能，来帮助更简单的方法来处理异步编程，帮助我们远离回调地狱。Promise是下边要讲的Generator/yield与async/await的基础，希望你已经提前了解了它。
在大概ES6的时代，推出了Generator/yield两个关键字，使用Generator可以很方便的帮助我们建立一个处理Promise的解释器。
然后，在ES7左右，我们又得到了async/await这样的语法，可以让我们以接近编写同步代码的方式来编写异步代码（无需使用.then()或者回调函数）。
两者都能够帮助我们很方便的进行异步编程，但同样，这两者之间也是有不少区别的。
Generator
Generator是一个函数，可以在函数内部通过yield返回一个值（此时，Generator函数的执行会暂定，直到下次触发.next()）
创建一个Generator函数的方法是在function关键字后添加*标识。
在调用一个Generator函数后，并不会立即执行其中的代码，函数会返回一个Generator对象，通过调用对象的next函数，可以获得yield/return的返回值。
无论是触发了yield还是return，next()函数总会返回一个带有value和done属性的对象。value为返回值，done则是一个Boolean对象，用来标识Generator是否还能继续提供返回值。
P.S. Generator函数的执行时惰性的，yield后的代码只在触发next时才会执行
1 function * oddGenerator () { 2 yield 1 3 yield 3 4 5 return 5 6 } 7 8 let iterator = oddGenerator() 9 10 let first = iterator.next() // { value: 1, done: false } 11 let second = iterator.next() // { value: 3, done: false } 12 let third = iterator.next() // { value: 5, done: true }
next的参数传递
我们可以在调用next()的时候传递一个参数，可以在上次yield前接收到这个参数：
1 function * outputGenerator () { 2 let ret1 = yield 1 3 console.log(`got ret1: ${ret1}`) 4 let ret2 = yield 2 5 console.log(`got ret2: ${ret2}`) 6 } 7 8 let iterator = outputGenerator() 9 10 iterator.next(1) 11 iterator.next(2) // got ret1: 2 12 iterator.next(3) // got ret2: 3
第一眼看上去可能会有些诡异，为什么第一条log是在第二次调用next时才进行输出的
这就又要说到上边的Generator的实现了，上边说到了，yield与return都是用来返回值的语法。
函数在执行时遇到这两个关键字后就会暂停执行，等待下次激活。
然后let ret1 = yield 1，这是一个赋值表达式，也就是说会先执行=右边的部分，在=右边执行的过程中遇到了yield关键字，函数也就在此处暂停了，在下次触发next()时才被激活，此时，我们继续进行上次未完成的赋值语句let ret1 = XXX，并在再次遇到yield时暂停。
这也就解释了为什么第二次调用next()的参数会被第一次yield赋值的变量接收到
用作迭代器使用
因为Generator对象是一个迭代器，所以我们可以直接用于for of循环：
但是要注意的是，用作迭代器中的使用，则只会作用于
yieldreturn的返回值不计入迭代
1 function * oddGenerator () { 2 yield 1 3 yield 3 4 yield 5 5 6 return 'won\'t be iterate' 7 } 8 9 for (let value of oddGenerator()) { 10 console.log(value) 11 } 12 // > 1 13 // > 3 14 // > 5
Generator函数内部的Generator
除了yield语法以外，其实还有一个yield*语法，可以粗略的理解为是Generator函数版的[...]
用来展开Generator迭代器的。
1 function * gen1 () { 2 yield 1 3 yield* gen2() 4 yield 5 5 } 6 7 function * gen2 () { 8 yield 2 9 yield 3 10 yield 4 11 return 'won\'t be iterate' 12 } 13 14 for (let value of gen1()) { 15 console.log(value) 16 } 17 // > 1 18 // > 2 19 // > 3 20 // > 4 21 // > 5
模拟实现Promise执行器
然后我们结合着Promise，来实现一个简易的执行器。
最受欢迎的类似的库是： co
1 function run (gen) { 2 gen = gen() 3 return next(gen.next()) 4 5 function next ({done, value}) { 6 return new Promise(resolve => { 7 if (done) { // finish 8 resolve(value) 9 } else { // not yet 10 value.then(data => { 11 next(gen.next(data)).then(resolve) 12 }) 13 } 14 }) 15 } 16 } 17 18 function getRandom () { 19 return new Promise(resolve => { 20 setTimeout(_ => resolve(Math.random() * 10 | 0), 1000) 21 }) 22 } 23 24 function * main () { 25 let num1 = yield getRandom() 26 let num2 = yield getRandom() 27 28 return num1 + num2 29 } 30 31 run(main).then(data => { 32 console.log(`got data: ${data}`); 33 })
一个简单的解释器的模拟（仅作举例说明）
在例子中，我们约定yield后边的必然是一个Promise函数
我们只看main()函数的代码，使用Generator确实能够让我们让近似同步的方式来编写异步代码
但是，这样写就意味着我们必须有一个外部函数负责帮我们执行main()函数这个Generator，并处理其中生成的Promise，然后在then回调中将结果返回到Generator函数，以便可以执行下边的代码。
Async
我们使用async/await来重写上边的Generator例子：
1 function getRandom () { 2 return new Promise(resolve => { 3 setTimeout(_ => resolve(Math.random() * 10 | 0), 1000) 4 }) 5 } 6 7 async function main () { 8 let num1 = await getRandom() 9 let num2 = await getRandom() 10 11 return num1 + num2 12 }
console.log(`got data: ${await main()}`) 这样看上去，好像我们从Generator/yield换到async/await只需要把*都改为async，yield都改为await就可以了。 所以很多人都直接拿Generator/yield来解释async/await的行为，但这会带来如下几个问题：
-
Generator有其他的用途，而不仅仅是用来帮助你处理Promise - 这样的解释让那些不熟悉这两者的人理解起来更困难（因为你还要去解释那些类似
co的库）
async/await是处理Promise的一个极其方便的方法，但如果使用不当的话，也会造成一些令人头疼的问题
Async函数始终返回一个Promise
一个async函数，无论你return 1或者throw new Error()。
在调用方来讲，接收到的始终是一个Promise对象：
1 async function throwError () { 2 throw new Error() 3 } 4 async function returnNumber () { 5 return 1 6 } 7 8 console.log(returnNumber() instanceof Promise) // true 9 console.log(throwError() instanceof Promise) // true
也就是说，无论函数是做什么用的，你都要按照Promise的方式来处理它。
Await是按照顺序执行的，并不能并行执行
JavaScript是单线程的，这就意味着await一只能一次处理一个，如果你有多个Promise需要处理，则就意味着，你要等到前一个Promise处理完成才能进行下一个的处理，这就意味着，如果我们同时发送大量的请求，这样处理就会非常慢，one by one：
1 const bannerImages = [] 2 3 async function getImageInfo () { 4 return bannerImages.map(async banner => await getImageInfo(banner)) 5 }
就像这样的四个定时器，我们需要等待4s才能执行完毕：
1 function delay () { 2 return new Promise(resolve => setTimeout(resolve, 1000)) 3 } 4 5 let tasks = [1, 2, 3, 4] 6 7 async function runner (tasks) { 8 for (let task of tasks) { 9 await delay() 10 } 11 } 12 13 console.time('runner') 14 await runner(tasks) 15 console.timeEnd('runner')
像这种情况，我们可以进行如下优化：
1 function delay () { 2 return new Promise(resolve => setTimeout(resolve, 1000)) 3 } 4 5 let tasks = [1, 2, 3, 4] 6 7 async function runner (tasks) { 8 tasks = tasks.map(delay) 9 await Promise.all(tasks) 10 } 11 12 console.time('runner') 13 await runner(tasks) 14 console.timeEnd('runner')
草案中提到过
await*，但现在貌似还不是标准，所以还是采用Promise.all包裹一层的方法来实现
我们知道，Promise对象在创建时就会执行函数内部的代码，也就意味着，在我们使用map创建这个数组时，所有的Promise代码都会执行，也就是说，所有的请求都会同时发出去，然后我们通过await Promise.all来监听所有Promise的响应。
结论
Generator与async function都是返回一个特定类型的对象：
-
Generator: 一个类似{ value: XXX, done: true }这样结构的Object -
Async: 始终返回一个Promise，使用await或者.then()来获取返回值
Generator是属于生成器，一种特殊的迭代器，用来解决异步回调问题感觉有些不务正业了。。 而async则是为了更简洁的使用Promise而提出的语法，相比Generator + co这种的实现方式，更为专注，生来就是为了处理异步编程。
现在已经是2018年了，async也是用了好久，就让Generator去做他该做的事情吧。。
参考资料
示例代码：code-resource
