[[407624]]

本文轉載自微信公眾號「五月君」，作者五月君。轉載本文請聯系五月君公眾號。

ES7 之后引入了 Async/Await 解決異步編程，這種方式在 JavaScript 異步編程中目前也被稱為 “終極解決方案”。

基本使用

函數聲明時在 function 關鍵詞之前使用 async 關鍵字，內部使用 await 替換了 Generator 中的 yield，語義上比起 Generator 中的 * 號也更明確。

在執行時相比 Generator 而言，Async/Await 內置執行器，不需要 co 這樣的外部模塊，程序語言本身實現是最好的，使用上也更簡單。

聲明 async 函數

以下是基于 Generator 一講中的一個例子做了改造，在第二個 await 后面，使用 Promise 封裝了下，它本身是支持跟一個 Promise 對象的，這個時候它會等待當 Promise 狀態變為 Fulfilled 才會執行下一步，當 Promise 未能正常執行 resolve/reject 時那就意味著，下面的也將得不到執行。

await 后面還可跟上基本類型：數值、字符串、布爾值，但這時也會立即轉成 Fulfilled 狀態的 Promise。

async function test() { 
  const res1 = await 'A'; 
  const res2 = await Promise.resolve(res1 + 'B'); 
  const res3 = await res2 + 'C'; 
  return res3; 
} 
 
(async () => { 
  const res = await test(); // ABC 
})(); 

錯誤管理

如果 await 后面的 Promise 返回一個錯誤，需要 try/catch 做錯誤捕獲，若有多個 await 操作也可都放在一起。這種情況，假如第一個 await 后面的 Promise 報錯，第二個 await 是不會執行的。

這和普通函數操作基本上是一樣的，不同的是對于異步函數我們需要加上 await 關鍵字。

(async () => { 
  try { 
   await fetch1(url); 
   await fetch2(url); 
  } catch (err) { 
   // TODO 
  } 
})(); 

也要注意 await 必須寫在 async 函數里，否則會報錯 SyntaxError: await is only valid in async functions and the top level bodies of modules。

// 錯誤的操作 
(() => { 
  await 'A'; 
})(); 

這樣寫也是不行的，在 “協程” 一講中也提過類似的示例，只不過當時是基于 yield 表達式，async/await 實際上是 Generator 函數的一種語法糖，內部機制是一樣的，forEach 里面的匿名函數是一個普通的函數，運行時會被看作是一個子函數，棧式協程是從子函數產生的，而 ES6 中實現的協程屬于無堆棧式協程，只能從生成器內部生成。以下代碼在運行時會直接失敗。

(async () => { 
  ['B', 'C'].forEach(item => { 
    const res = await item; 
    console.log(res); 
  }) 
})(); 

想通過 await 表達式正常運行，就要避免使用回調函數，可以使用遍歷器 for...of。

(async () => { 
  for (const item of ['B', 'C']) { 
    const res = await item; // B C 
  } 
})(); 

并發執行

當我們擁有多個異步請求，且不必順序執行時，可以在 await 表達式后使用 Promise.all()，這是一個很好的實踐。

(async () => { 
  await Promise.all([ 
   fetch(url1), 
    fetch(ur2) 
  ]) 
})(); 

通過這個示例可以看出，async/await 也還是基于 Promise 的。

異步迭代

上面講解的使用 Async/Await 都是基于單次運行的異步函數，在 Node.js 中我們還有一類需求它來自于連續的事件觸發，例如，基于流式 API 讀取數據，常見的是注冊 on('data', callback) 事件和回調函數，但是這樣我們不能利用常規的 Async/Await 表達式來處理這類場景。

異步迭代器

異步迭代器與同步迭代器不同的是，一個可迭代的異步迭代器對象具有 [Symbol.asyncIterator] 屬性，并且返回的是一個 Promise.resolve({ value, done }) 結果。

實現異步迭代器比較方便的方式是使用聲明為 async 的生成器函數，可以使我們像常規函數中一樣去使用 await，以下展示了 Node.js 可讀流對象是如何實現的異步可迭代，只列出了核心代碼，異步迭代器筆者也有一篇詳細的文章介紹，很精彩，感興趣的可以看看 探索異步迭代器在 Node.js 中的使用。

// for await...of 循環會調用 
Readable.prototype[SymbolAsyncIterator] = function() { 
  ... 
  const iter = createAsyncIterator(stream); 
  return iter; 
}; 
 
// 聲明一個創建異步迭代器對象的生成器函數 
async function* createAsyncIterator(stream) { 
  ... 
  try { 
    while (true) { 
      // stream.read() 從內部緩沖拉取并返回數據。如果沒有可讀的數據，則返回 null 
      // readable 的 destroy() 方法被調用后 readable.destroyed 為 true，readable 即為下面的 stream 對象 
      const chunk = stream.destroyed ? null : stream.read(); 
      if (chunk !== null) { 
        yield chunk; // 這里是關鍵，根據迭代器協議定義，迭代器對象要返回一個 next() 方法，使用 yield 返回了每一次的值 
      } 
      ... 
    } 
  } catch (err) { 
  } 
} 

for...await...of 遍歷器

Node.js Stream 模塊的可讀流對象在 v10.0.0 版本試驗性的支持了 [Symbol.asyncIterator] 屬性，可以使用 for await...of 語句遍歷可讀流對象，在 v11.14.0 版本以上已 LTS 支持，這使得我們從流中讀取連續的數據塊變的很方便。

const fs = require('fs'); 
const readable = fs.createReadStream('./hello.txt', { encoding: 'utf-8' }); 
 
async function readText(readable) { 
  let data = ''; 
  for await (const chunk of readable) { 
    data += chunk; 
  } 
  return data; 
} 
 
(async () => { 
  try { 
    const res = await readText(readable); 
    console.log(res); // Hello Node.js 
  } catch (err) { 
    console.log(err.message); 
  } 
})(); 

使用 **for await...of** 語句遍歷 readable，如果循環中因為 break 或 throw 一個錯誤而終止，則這個 Stream 也將被銷毀。

頂級 Await

根據 async 函數語法規則，await 只能出現在 async 異步函數內。對于異步資源，之前我們必須在 async 函數內才可使用 await，這對一些在文件頂部需要實例化的資源可能會不好操作。

在 Node.js v14.x LTS 發布后，已支持頂級 Await 我們可以方便的在文件頂部對這些異步資源做一些初始化操作。

我們可以像下面這樣來寫，但這種模式也只有在 ES Modules 中才可用。

import fetch from 'node-fetch'; 
const res = await fetch(url) 

總結

JavaScript 編程中大部分操作都是異步編程，Async/Await 可以已同步的方式來書寫我們的代碼，但是實際執行其還是異步的，這種被方式目前也稱為異步編程的終極解決方案。