關於for await 

前言

  在先前的 初探 async 與 await 介紹了 await 的基本用法，最近發現可以搭配 for 來使用，在此把學習的過程做個紀錄。

內容

  範例如下

// noprotect
function resolveByTime(x, waitTime) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, waitTime);
  });
}
//
const promises = [
  resolveByTime(1,1000), 
  resolveByTime(2,5000), 
  resolveByTime(3,2000) ];

//
(async function () {
  for await (const item of promises) {
    console.log(`[for await...of] result: ${ item }`);
  }
})();

//
(async function () {
  for (const item of promises) {
    const result = await item;
    console.log(`[for...of] result: ${ result }` );
  }
})();

開頭的註解"// noprotect" 是為了讓 Jsbin 可以正常運作加的，請勿省略。範例有一個 Promise 的陣列，裡面有三個 Promise ，接著就利用 async function 來使用 for await ... of 的方式來啟動每個 Promise，接著會再使用 for...of 的方式啟動每個 Promise ，如果只看語意的結果可能會認為 for await ... of 會同時啟動每個 Promise ，而 for...of  會啟動完一個 Promise 後才啟動下一個，但不幸的是結果並非如此!就結果來看，不論是 for await ... of  或 for...of  都會同時啟動每個 Promise ，for 迴圈的內容會照陣列的順序進行 await ，範例會先顯示第一個 Promise 的結果後，等一段時間後會同時完成第二與第三個 Promise ，因為等待完第二個以後第三個就會馬上完成，因為第三個的時間比第二個短，加上 Promise 是同時啟動的，所以第二個顯示完就馬上顯示第三個。

參考資料

[ pjchender.dev ] [JS] Async and Await in JavaScript

相關文章與資料

初探 async 與 await