摘要：從開始，就在引入新功能，來幫助更簡單的方法來處理異步編程，幫助我們遠(yuǎn)離回調(diào)地獄。而則是為了更簡潔的使用而提出的語法，相比這種的實(shí)現(xiàn)方式，更為專注，生來就是為了處理異步編程。

從Promise開始，JavaScript就在引入新功能，來幫助更簡單的方法來處理異步編程，幫助我們遠(yuǎn)離回調(diào)地獄。
Promise是下邊要講的Generator/yield與async/await的基礎(chǔ)，希望你已經(jīng)提前了解了它。

在大概ES6的時(shí)代，推出了Generator/yield兩個(gè)關(guān)鍵字，使用Generator可以很方便的幫助我們建立一個(gè)處理Promise的解釋器。

然后，在ES7左右，我們又得到了async/await這樣的語法，可以讓我們以接近編寫同步代碼的方式來編寫異步代碼（無需使用.then()或者回調(diào)函數(shù)）。

兩者都能夠幫助我們很方便的進(jìn)行異步編程，但同樣，這兩者之間也是有不少區(qū)別的。

Generator是一個(gè)函數(shù)，可以在函數(shù)內(nèi)部通過yield返回一個(gè)值（此時(shí)，Generator函數(shù)的執(zhí)行會(huì)暫定，直到下次觸發(fā).next()）
創(chuàng)建一個(gè)Generator函數(shù)的方法是在function關(guān)鍵字后添加*標(biāo)識(shí)。

在調(diào)用一個(gè)Generator函數(shù)后，并不會(huì)立即執(zhí)行其中的代碼，函數(shù)會(huì)返回一個(gè)Generator對(duì)象，通過調(diào)用對(duì)象的next函數(shù)，可以獲得yield/return的返回值。
無論是觸發(fā)了yield還是return，next()函數(shù)總會(huì)返回一個(gè)帶有value和done屬性的對(duì)象。
value為返回值，done則是一個(gè)Boolean對(duì)象，用來標(biāo)識(shí)Generator是否還能繼續(xù)提供返回值。
P.S. Generator函數(shù)的執(zhí)行時(shí)惰性的，yield后的代碼只在觸發(fā)next時(shí)才會(huì)執(zhí)行

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  }

我們可以在調(diào)用next()的時(shí)候傳遞一個(gè)參數(shù)，可以在上次yield前接收到這個(gè)參數(shù)：

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

第一眼看上去可能會(huì)有些詭異，為什么第一條log是在第二次調(diào)用next時(shí)才進(jìn)行輸出的
這就又要說到上邊的Generator的實(shí)現(xiàn)了，上邊說到了，yield與return都是用來返回值的語法。
函數(shù)在執(zhí)行時(shí)遇到這兩個(gè)關(guān)鍵字后就會(huì)暫停執(zhí)行，等待下次激活。
然后let ret1 = yield 1，這是一個(gè)賦值表達(dá)式，也就是說會(huì)先執(zhí)行=右邊的部分，在=右邊執(zhí)行的過程中遇到了yield關(guān)鍵字，函數(shù)也就在此處暫停了，在下次觸發(fā)next()時(shí)才被激活，此時(shí)，我們繼續(xù)進(jìn)行上次未完成的賦值語句let ret1 = XXX，并在再次遇到yield時(shí)暫停。
這也就解釋了為什么第二次調(diào)用next()的參數(shù)會(huì)被第一次yield賦值的變量接收到

因?yàn)?b>Generator對(duì)象是一個(gè)迭代器，所以我們可以直接用于for of循環(huán)：

但是要注意的是，用作迭代器中的使用，則只會(huì)作用于yield  
return的返回值不計(jì)入迭代

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

  return "won"t be iterate"
}

for (let value of oddGenerator()) {
  console.log(value)
}
// > 1
// > 3
// > 5

除了yield語法以外，其實(shí)還有一個(gè)yield*語法，可以粗略的理解為是Generator函數(shù)版的[...]
用來展開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

然后我們結(jié)合著Promise，來實(shí)現(xiàn)一個(gè)簡易的執(zhí)行器。

最受歡迎的類似的庫是： 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)
       })
     }
   })
  }
}

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}`);
})

一個(gè)簡單的解釋器的模擬（僅作舉例說明）

在例子中，我們約定yield后邊的必然是一個(gè)Promise函數(shù)
我們只看main()函數(shù)的代碼，使用Generator確實(shí)能夠讓我們讓近似同步的方式來編寫異步代碼
但是，這樣寫就意味著我們必須有一個(gè)外部函數(shù)負(fù)責(zé)幫我們執(zhí)行main()函數(shù)這個(gè)Generator，并處理其中生成的Promise，然后在then回調(diào)中將結(jié)果返回到Generator函數(shù)，以便可以執(zhí)行下邊的代碼。

我們使用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()

  return num1 + num2
}

console.log(`got data: ${await main()}`)

這樣看上去，好像我們從Generator/yield換到async/await只需要把*都改為async，yield都改為await就可以了。
所以很多人都直接拿Generator/yield來解釋async/await的行為，但這會(huì)帶來如下幾個(gè)問題：

Generator有其他的用途，而不僅僅是用來幫助你處理Promise

這樣的解釋讓那些不熟悉這兩者的人理解起來更困難（因?yàn)槟氵€要去解釋那些類似co的庫）

async/await是處理Promise的一個(gè)極其方便的方法，但如果使用不當(dāng)?shù)脑挘矔?huì)造成一些令人頭疼的問題

一個(gè)async函數(shù)，無論你return 1或者throw new Error()。
在調(diào)用方來講，接收到的始終是一個(gè)Promise對(duì)象：

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

console.log(returnNumber() instanceof Promise) // true
console.log(throwError() instanceof Promise)   // true

也就是說，無論函數(shù)是做什么用的，你都要按照Promise的方式來處理它。

JavaScript是單線程的，這就意味著await一只能一次處理一個(gè)，如果你有多個(gè)Promise需要處理，則就意味著，你要等到前一個(gè)Promise處理完成才能進(jìn)行下一個(gè)的處理，這就意味著，如果我們同時(shí)發(fā)送大量的請(qǐng)求，這樣處理就會(huì)非常慢，one by one：

const bannerImages = []

async function getImageInfo () {
  return bannerImages.map(async banner => await getImageInfo(banner))
}

就像這樣的四個(gè)定時(shí)器，我們需要等待4s才能執(zhí)行完畢：

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")
await runner(tasks)
console.timeEnd("runner")

像這種情況，我們可以進(jìn)行如下優(yōu)化：

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")

草案中提到過await*，但現(xiàn)在貌似還不是標(biāo)準(zhǔn)，所以還是采用Promise.all包裹一層的方法來實(shí)現(xiàn)

我們知道，Promise對(duì)象在創(chuàng)建時(shí)就會(huì)執(zhí)行函數(shù)內(nèi)部的代碼，也就意味著，在我們使用map創(chuàng)建這個(gè)數(shù)組時(shí)，所有的Promise代碼都會(huì)執(zhí)行，也就是說，所有的請(qǐng)求都會(huì)同時(shí)發(fā)出去，然后我們通過await Promise.all來監(jiān)聽所有Promise的響應(yīng)。

Generator與async function都是返回一個(gè)特定類型的對(duì)象：

Generator: 一個(gè)類似{ value: XXX, done: true }這樣結(jié)構(gòu)的Object

Async: 始終返回一個(gè)Promise，使用await或者.then()來獲取返回值

Generator是屬于生成器，一種特殊的迭代器，用來解決異步回調(diào)問題感覺有些不務(wù)正業(yè)了。。
而async則是為了更簡潔的使用Promise而提出的語法，相比Generator + co這種的實(shí)現(xiàn)方式，更為專注，生來就是為了處理異步編程。

現(xiàn)在已經(jīng)是2018年了，async也是用了好久，就讓Generator去做他該做的事情吧。。

modern-javascript-and-asynchronous-programming-generators-yield-vs-async-await

async-function-tips

示例代碼：code-resource