重學 JS：為啥 await 不能用在 forEach 中

這是重學 JS 系列的第三篇文章，寫這個系列的初衷也是為了夯實自己的 JS 基礎或者瞭解一些之前不知道的東西。既然是重學，肯定不會從零開始介紹一個知識點，如有遇到不會的內容請自行查詢資料。

不知道你有沒有寫過類似的程式碼，反正以前我是寫過

function test() {
  let arr = [3, 2, 1]
  arr.forEach(async item => {
    const res = await fetch(item)
    console.log(res)
  })
  console.log('end')
}

function fetch(x) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(x)
    }, 500 * x)
  })
}

test()
複製程式碼

我當時期望的列印順序是

3
2
1
end
複製程式碼

結果現實與我開了個玩笑，列印順序居然是

end
1
2
3
複製程式碼

為什麼？

其實原因很簡單，那就是 forEach 只支援同步程式碼。

我們可以參考下 Polyfill 版本的 forEach，簡化以後類似就是這樣的虛擬碼

while (index < arr.length) {
    // 也就是我們傳入的回撥函式
    callback(item, index)
}
複製程式碼

從上述程式碼中我們可以發現，forEach 只是簡單的執行了下回撥函式而已，並不會去處理非同步的情況。並且你在 callback 中即使使用 break 也並不能結束遍歷。

怎麼解決？

一般來說解決的辦法有兩種。

第一種是使用 Promise.all 的方式

async function test() {
  let arr = [3, 2, 1]
  await Promise.all(
    arr.map(async item => {
      const res = await fetch(item)
      console.log(res)
    })
  )
  console.log('end')
}
複製程式碼

這樣可以生效的原因是 async 函式肯定會返回一個 Promise 物件，呼叫 map 以後返回值就是一個存放了 Promise 的陣列了，這樣我們把陣列傳入 Promise.all 中就可以解決問題了。但是這種方式其實並不能達成我們要的效果，如果你希望內部的 fetch 是順序完成的，可以選擇第二種方式。

第一種方法是使用 for...of

async function test() {
  let arr = [3, 2, 1]
  for (const item of arr) {
    const res = await fetch(item)
    console.log(res)
  }
  console.log('end')
}
複製程式碼

這種方式相比 Promise.all 要簡潔的多，並且也可以實現開頭我想要的輸出順序。

但是這時候你是否又多了一個疑問？為啥 for...of 內部就能讓 await 生效呢。

因為 for...of 內部處理的機制和 forEach 不同，forEach 是直接呼叫回撥函式，for...of 是通過迭代器的方式去遍歷。

async function test() {
  let arr = [3, 2, 1]
  const iterator = arr[Symbol.iterator]()
  let res = iterator.next()
  while (!res.done) {
    const value = res.value
    const res1 = await fetch(value)
    console.log(res1)
    res = iterator.next()
  }
  console.log('end')
}
複製程式碼

以上程式碼等價於 for...of，可以看成 for...of 是以上程式碼的語法糖。

最後

以上就是本篇文章的全部內容了，如果你還有什麼疑問歡迎在評論區與我互動。

我所有的系列文章都會在我的 Github 中最先更新，有興趣的可以關注下。今年主要會著重寫以下三個專欄

• 重學 JS
• React 進階
• 重寫元件

最後，覺得內容有幫助可以關注下我的公眾號 「前端真好玩」咯，會有很多好東西等著你。