這是重學(xué) JS 系列的第三篇文章，寫(xiě)這個(gè)系列的初衷也是為了夯實(shí)自己的 JS 基礎(chǔ)或者了解一些之前不知道的東西。既然是重學(xué)，肯定不會(huì)從零開(kāi)始介紹一個(gè)知識(shí)點(diǎn)，如有遇到不會(huì)的內(nèi)容請(qǐng)自行查找資料。

不知道你有沒(méi)有寫(xiě)過(guò)類(lèi)似的代碼，反正以前我是寫(xiě)過(guò)

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

我當(dāng)時(shí)期望的打印順序是

3
2
1
end

 結(jié)果現(xiàn)實(shí)與我開(kāi)了個(gè)玩笑，打印順序居然是

end
1
2
3

為什么？

其實(shí)原因很簡(jiǎn)單，那就是 forEach 只支持同步代碼。

我們可以參考下 Polyfill 版本的 forEach，簡(jiǎn)化以后類(lèi)似就是這樣的偽代碼

while (index < arr.length) {
  // 也就是我們傳入的回調(diào)函數(shù)
  callback(item, index)
}

從上述代碼中我們可以發(fā)現(xiàn)，forEach 只是簡(jiǎn)單的執(zhí)行了下回調(diào)函數(shù)而已，并不會(huì)去處理異步的情況。并且你在 callback 中即使使用 break 也并不能結(jié)束遍歷。

怎么解決？

一般來(lái)說(shuō)解決的辦法有兩種。

第一種是使用 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 函數(shù)肯定會(huì)返回一個(gè) Promise 對(duì)象，調(diào)用 map 以后返回值就是一個(gè)存放了 Promise 的數(shù)組了，這樣我們把數(shù)組傳入 Promise.all 中就可以解決問(wèn)題了。但是這種方式其實(shí)并不能達(dá)成我們要的效果，如果你希望內(nèi)部的 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 要簡(jiǎn)潔的多，并且也可以實(shí)現(xiàn)開(kāi)頭我想要的輸出順序。

但是這時(shí)候你是否又多了一個(gè)疑問(wèn)？為啥 for...of 內(nèi)部就能讓 await 生效呢。

因?yàn)?for...of 內(nèi)部處理的機(jī)制和 forEach 不同，forEach 是直接調(diào)用回調(diào)函數(shù)，for...of 是通過(guò)迭代器的方式去遍歷。

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

最后
以上就是本篇文章的全部?jī)?nèi)容了，如果你還有什么疑問(wèn)歡迎在評(píng)論區(qū)與我互動(dòng)。

我所有的系列文章都會(huì)在我的 Github 中最先更新，有興趣的可以關(guān)注下。今年主要會(huì)著重寫(xiě)以下三個(gè)專(zhuān)欄

重學(xué) JS
React 進(jìn)階
重寫(xiě)組件

以上所述是小編給大家介紹的為啥await 不能用在 forEach 中詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！