JavaScript異步編程：Generator與Async

時間 2019-11-29

標籤 javascript 異步編程 generator async 欄目 JavaScript 简体版

原文原文鏈接

從Promise開始，JavaScript就在引入新功能，來幫助更簡單的方法來處理異步編程，幫助咱們遠離回調地獄。
Promise是下邊要講的Generator/yield與async/await的基礎，但願你已經提早了解了它。javascript

在大概ES6的時代，推出了Generator/yield兩個關鍵字，使用Generator能夠很方便的幫助咱們創建一個處理Promise的解釋器。html

而後，在ES7左右，咱們又獲得了async/await這樣的語法，可讓咱們以接近編寫同步代碼的方式來編寫異步代碼（無需使用.then()或者回調函數）。java

二者都可以幫助咱們很方便的進行異步編程，但一樣，這二者之間也是有很多區別的。git

Generator

Generator是一個函數，能夠在函數內部經過yield返回一個值（此時，Generator函數的執行會暫定，直到下次觸發.next()）
建立一個Generator函數的方法是在function關鍵字後添加*標識。github

在調用一個Generator函數後，並不會當即執行其中的代碼，函數會返回一個Generator對象，經過調用對象的next函數，能夠得到yield/return的返回值。
不管是觸發了yield仍是return，next()函數總會返回一個帶有value和done屬性的對象。
value爲返回值，done則是一個Boolean對象，用來標識Generator是否還能繼續提供返回值。
P.S. Generator函數的執行時惰性的，yield後的代碼只在觸發next時纔會執行npm

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循環：dom

可是要注意的是，用做迭代器中的使用，則只會做用於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)
       })
     }
   })
  }
}

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

  return num1 + num2
}

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對象：

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')
await runner(tasks)
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')
複製代碼