溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這是重學 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')
}
最后
以上就是本篇文章的全部內容了，如果你還有什么疑問歡迎在評論區與我互動。
我所有的系列文章都會在我的 Github 中最先更新，有興趣的可以關注下。今年主要會著重寫以下三個專欄
重學 JS
React 進階
重寫組件
以上所述是小編給大家介紹的為啥await 不能用在 forEach 中詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
