不知道你有沒有寫過類似的代碼，反正以前我是寫過
我當時期望的打印順序是
結果現實與我開了個玩笑，打印順序居然是
為什麼？
其實原因很簡單，那就是 forEach 只支持同步代碼。
我們可以參考下 Polyfill 版本的 forEach，簡化以後類似就是這樣的偽代碼
從上述代碼中我們可以發現，forEach 只是簡單的執行了下回調函數而已，並不會去處理異步的情況。並且你在 callback 中即使使用 break 也並不能結束遍歷。
怎麼解決？
一般來說解決的辦法有兩種。
第一種是使用 Promise.all 的方式
這樣可以生效的原因是 async 函數肯定會返回一個 Promise 對象，調用 map 以後返回值就是一個存放了 Promise 的數組了，這樣我們把數組傳入 Promise.all 中就可以解決問題了。但是這種方式其實並不能達成我們要的效果，如果你希望內部的 fetch 是順序完成的，可以選擇第二種方式。
第一種方法是使用 for...of
這種方式相比 Promise.all 要簡潔的多，並且也可以實現開頭我想要的輸出順序。
但是這時候你是否又多了一個疑問？為啥 for...of 內部就能讓 await 生效呢。
因為 for...of 內部處理的機制和 forEach 不同，forEach 是直接調用回調函數，for...of 是通過迭代器的方式去遍歷。
以上代碼等價於 for...of，可以看成 for...of 是以上代碼的語法糖。
分享到:
閱讀更多 前端圈 的文章
