深入解析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，快速升職加薪，走上人生巔峰。

深入解析JavaScript非同步程式設計：Generator與Async

模擬實現Promise執行器

相關文章