深刻解析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时才会执行

function * oddGenerator () {
  yield 1
  yield 3

  return 5
}

let iterator = oddGenerator()

let first = iterator.next()  // { value: 1, done: false }
let second = iterator.next() // { value: 3, done: false }
let third = iterator.next()  // { value: 5, done: true  }
复制代码

next的参数传递

咱们能够在调用next()的时候传递一个参数，能够在上次yield前接收到这个参数：

function * outputGenerator () {
  let ret1 = yield 1
  console.log(`got ret1: ${ret1}`)
  let ret2 = yield 2
  console.log(`got ret2: ${ret2}`)
}
let iterator = outputGenerator()
iterator.next(1)
iterator.next(2) // got ret1: 2
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循环：

可是要注意的是，用做迭代器中的使用，则只会做用于yield return的返回值不计入迭代

function * oddGenerator () {
  yield 1
  yield 3
  yield 5

  return 'won\'t be iterate' } for (let value of oddGenerator()) { console.log(value) } // > 1 // > 3 // > 5 复制代码

Generator函数内部的Generator 除了yield语法之外，其实还有一个yield*语法，能够粗略的理解为是Generator函数版的[...] 用来展开Generator迭代器的。

function * gen1 () {
  yield 1
  yield* gen2()
  yield 5
}
function * gen2 () {
  yield 2
  yield 3
  yield 4
  return 'won\'t be iterate' } for (let value of gen1()) { console.log(value) } // > 1 // > 2 // > 3 // > 4 // > 5 复制代码

模拟实现Promise执行器

而后咱们结合着Promise，来实现一个简易的执行器。

最受欢迎的相似的库是： co

function run (gen) {
  gen = gen()
  return next(gen.next())

  function next ({done, value}) {
    return new Promise(resolve => {
     if (done) { // finish
       resolve(value)
     } else { // not yet
       value.then(data => {
         next(gen.next(data)).then(resolve)
       })
     }//欢迎加入全栈开发交流圈一块儿学习交流：864305860
   })//面向1-3年前端人员
  }//帮助突破技术瓶颈，提高思惟能力  
}

function getRandom () {
  return new Promise(resolve => {
    setTimeout(_ => resolve(Math.random() * 10 | 0), 1000)
  })
}

function * main () {
  let num1 = yield getRandom()
  let num2 = yield getRandom()

  return num1 + num2
}

run(main).then(data => {
  console.log(`got data: ${data}`);
})
复制代码

一个简单的解释器的模拟（仅做举例说明）

在例子中，咱们约定yield后边的必然是一个Promise函数 咱们只看main()函数的代码，使用Generator确实可以让咱们让近似同步的方式来编写异步代码 可是，这样写就意味着咱们必须有一个外部函数负责帮咱们执行main()函数这个Generator，并处理其中生成的Promise，而后在then回调中将结果返回到Generator函数，以即可以执行下边的代码。

Async 咱们使用async/await来重写上边的Generator例子：

function getRandom () {
  return new Promise(resolve => {
    setTimeout(_ => resolve(Math.random() * 10 | 0), 1000)
  })
}

async function main () {
  let num1 = await getRandom()
  let num2 = await getRandom()
                                              //欢迎加入全栈开发交流圈一块儿学习交流：864305860
  return num1 + num2                           //面向1-3年前端人员
 }                                           //帮助突破技术瓶颈，提高思惟能力  
复制代码

console.log(`got data: ${await main()}`)
复制代码

看上去好像咱们从Generator/yield换到async/await只须要把*都改成async，yield都改成await就能够了。 因此不少人都直接拿Generator/yield来解释async/await的行为，但这会带来以下几个问题：

1.Generator有其余的用途，而不只仅是用来帮助你处理Promise

2.这样的解释让那些不熟悉这二者的人理解起来更困难（由于你还要去解释那些相似co的库）

async/await是处理Promise的一个极其方便的方法，但若是使用不当的话，也会形成一些使人头疼的问题

Async函数始终返回一个Promise

一个async函数，不管你return 1或者throw new Error()。 在调用方来说，接收到的始终是一个Promise对象：

async function throwError () {
  throw new Error()
}
async function returnNumber () {
  return 1
}

console.log(returnNumber() instanceof Promise) // true
console.log(throwError() instanceof Promise)   // true
复制代码

不管函数是作什么用的，你都要按照Promise的方式来处理它。

Await是按照顺序执行的，并不能并行执行

JavaScript是单线程的，这就意味着await一只能一次处理一个，若是你有多个Promise须要处理，则就意味着，你要等到前一个Promise处理完成才能进行下一个的处理，这就意味着，若是咱们同时发送大量的请求，这样处理就会很是慢，one by one：

const bannerImages = []
 
 async function getImageInfo () {
   return bannerImages.map(async banner => await getImageInfo(banner))
 }
复制代码

这样的四个定时器，咱们须要等待4s才能执行完毕：

function delay () {
  return new Promise(resolve => setTimeout(resolve, 1000))
}
let tasks = [1, 2, 3, 4]
async function runner (tasks) {
  for (let task of tasks) {
    await delay()
  }
}
console.time('runner')//欢迎加入全栈开发交流圈一块儿学习交流：864305860
await runner(tasks)//面向1-3年前端人员  
console.timeEnd('runner')//帮助突破技术瓶颈，提高思惟能力
复制代码

对于这种状况，咱们能够进行以下优化：

function delay () {
  return new Promise(resolve => setTimeout(resolve, 1000))
}
let tasks = [1, 2, 3, 4]
async function runner (tasks) {
  tasks = tasks.map(delay)
  await Promise.all(tasks)
}
console.time('runner')
await runner(tasks)
console.timeEnd('runner')
复制代码

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这种的实现方式，更为专一，生来就是为了处理异步编程。

async也是用了很久，就让Generator去作这些该作的事情吧。 结语

感谢您的观看，若有不足之处，欢迎批评指正。

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同窗，欢迎加入Q群：864305860，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。 最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。