JavaScript異步編程：Generator與Async

2024年1月15日 134次阅读 来源: 賈順名

從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)
       })
     }
   })
  }
}

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的行動，但這會帶來以下幾個題目：

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

草案中提到過
await*，但如今貌似還不是規範，所以照樣採納
Promise.all包裹一層的要領來完成

我們曉得，Promise對象在建立時就會實行函數內部的代碼，也就意味着，在我們運用map建立這個數組時，一切的Promise代碼都邑實行，也就是說，一切的要求都邑同時發出去，然後我們經由過程await Promise.all來監聽一切Promise的相應。

結論

Generator與async function都是返回一個特定範例的對象：

  1. Generator: 一個相似{ value: XXX, done: true }如許構造的Object
  2. Async: 一直返回一個Promise，運用await或許.then()來獵取返回值

Generator是屬於天生器，一種特別的迭代器，用來處理異步回調題目覺得有些游手好閑了。。
而async則是為了更簡約的運用Promise而提出的語法，比擬Generator + co這類的完成體式格局，更加專註，生來就是為了處置懲罰異步編程。

如今已是2018年了，async也是用了良久，就讓Generator去做他該做的事變吧。。

參考資料

示例代碼：code-resource

    原文作者：賈順名
    原文地址: https://segmentfault.com/a/1190000014747477
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞