別再以為 await 到處都一樣：這只是“半個真相”
大多數前端以為：有了 await，代碼哪里都能暫停。 抱歉——這話只對了一半。
await 的行為，會因為使用場景而劇烈變化。 尤其是：你選的循環方式，會徹底改變await 的效果。
這是我真希望 6 個月前就有人告訴我的事，省下我一堆 async/await 的坑。
核心誤解：會“等”的不是所有地方
異步 JS 很“怪”。教程常這么教：函數前加 async，Promise 前放 await，完事兒。 但在循環 + 異步的組合里：并不是所有循環都懂得等待。
有的直接無視你的 await； 有的全部并行（即便你不想）； 還有的會默默給你整崩。
這里是 await 的“墳場”：forEach
最常見、傷害最大的錯誤：**在 forEach 里用 await**。
async function fetchUserProfiles() {
const userIds = [1, 2, 3, 4, 5]
userIds.forEach(async (id) => {
const profile = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
const data = await profile.json()
console.log(`User ${id}:`, data.name)
})
console.log('All done fetching users')
}
fetchUserProfiles()運行看看：
- “All done fetching users” 會立刻打印，在任何
fetch完成之前。 - 控制臺順序亂序：2、5、1、3、4……隨緣。
原因：forEach不關心 Promise。你的回調是 async，會返回 Promise，但 forEach直接忽略返回值，調用完就走。 你也沒法 await forEach，因為它不返回有用的東西。
看起來像對的語法，邏輯也似乎“合理”，但——**forEach 天生不為 Promise 設計**。
map 與 Promise 的“隱形坑”
這段代碼在 Review 里很常見，也很迷惑：
async function getAllUserData() {
const userIds = [1, 2, 3]
const userData = await userIds.map(async (id) => {
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
return response.json()
})
console.log(userData)
}你以為能拿到用戶對象數組？不，你會得到Promise 數組。await userIds.map(...)并不會等待里面的異步完成；map 只會收集回調返回的 Promise。
正確寫法：先收集 Promise，再 Promise.all 一把梭。
async function getAllUserData() {
const userIds = [1, 2, 3]
const userData = await Promise.all(
userIds.map(id =>
fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then(res => res.json())
)
)
console.log(userData)
}不小心的“串行殺性能”
確實有場景需要嚴格順序執行，這時用 for…of 很香：
async function processSequentially() {
const ids = [1, 2, 3]
for (const id of ids) {
const result = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
const data = await result.json()
console.log(`Processed ${id}:`, data)
}
console.log('Done')
}這段代碼直觀、可讀、靠譜。 但要小心：純串行意味著每個都要等上一個。 如果每次請求 1s，五次就5s。只有在確實存在依賴/限速/必須有序時才用串行；否則你就白白慢了 5 倍。
為什么 for…of 會“真的等”
for…of 是語言級的循環，不是數組方法。 在 for…of 里用 await，整個循環會在該處暫停，直到 Promise 解決：
const userIds = [1, 2, 3];
for (const id of userIds) {
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`); // 這里暫停
const data = await response.json();
console.log(data); // 等待后才繼續下一輪
}這與無法暫停的 forEach 本質不同。使用場景：強順序、節流/限流、結果必須按序。
要速度，就上 Promise.all 并行
當任務互不依賴，且你追求吞吐：
async function processInParallel() {
const ids = [1, 2, 3, 4, 5]
const promises = ids.map(id =>
fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then(res => res.json())
)
const results = await Promise.all(promises)
console.log('All results:', results)
}如果每個耗時 1s，并行就是**~1s 完成（不考慮帶寬/服務端限制）。順序保持與原數組一致，即便完成順序不同。注意：Promise.all失敗即全部失敗——任何一個 reject，整體直接 reject**，中間結果拿不到。
更韌性的并行：Promise.allSettled
想要“不管成功失敗都收集”：
async function fetchAllSources() {
const sources = [
'https://api1.com/data',
'https://api2.com/data',
'https://api3.com/data'
]
const promises = sources.map(url =>
fetch(url).then(res => res.json())
)
const results = await Promise.allSettled(promises)
results.forEach((result, index) => {
if (result.status === 'fulfilled') {
console.log(`Source ${index} succeeded:`, result.value)
} else {
console.error(`Source ${index} failed:`, result.reason)
}
})
}allSettled 會等所有 Promise 都 settle（resolve/reject 均可），然后給你完整戰況。
能不用就別用的：reduce + await
在 reduce 里玩 await，讀起來繞、調試更繞：
const userIds = [1, 2, 3];
async function fetchUsers() {
const users = await userIds.reduce(async (accPromise, id) => {
const acc = await accPromise;
const user = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
return [...acc, user];
}, Promise.resolve([]));
console.log(users);
}
fetchUsers();累加器從第二輪開始就是 Promise，你還得層層 await。 這通常比 for…of 或 Promise.all更難讀也更慢。 除非你確實在構建“步步相依”的序列，否則別選它。
進階：可控并發（批處理）
全串行太慢、全并發會被限流？中間態：分批并發。
async function processInBatches(items, batchSize = 5) {
const results = []
for (let i = 0; i < items.length; i += batchSize) {
const batch = items.slice(i, i + batchSize)
const batchResults = await Promise.all(
batch.map(item =>
fetch(`https://pokeapi.co/api/v2/pokemon/${item}`).then(res => res.json())
)
)
results.push(...batchResults)
}
return results
}每批最多 5 個，請求并發完成后再進下一批：性能優于純串行，風險低于無限并發，非常適合第三方 API 的并發上限。
最后的要點
下次你想在循環里敲上一個 await，先停半秒，想清楚你要的到底是：
- 強順序（
for…of）， - 極速并行（
Promise.all）， - 韌性收集（
Promise.allSettled）， - 還是限流批處理（分批
Promise.all）。
玩一玩這些模式，歡迎在評論里補充你的最佳實踐。
