JavaScript循环中异步操作需区分串行（for+await）与并行（Promise.all）；禁用forEach+async；可用Promise.allSettled容错，配合try/catch和timeout封装提升健壮性。
在 JavaScript 中，循环里执行异步操作时，用 async/await 替代回调能大幅提升可读性和控制力。关键不是“在 for 里直接 await”，而是要明确你想要**串行执行**（一个接一个）还是**并行执行**（一起发起，等全部完成），因为两者写法和行为完全不同。
串行执行：一个完成再开始下一个
适合需要按顺序处理、且后一步依赖前一步结果的场景（比如依次上传文件、逐条更新数据库记录）。
✅ 正确写法：用 for...of 或普通 for 循环，await 放在循环体内：
async function processItemsSerial(items) {
for (const item of items) {
const result = await fetchItem(item); // 等这个完成，才进下一轮
console.log(result);
}
}
⚠️ 注意：不能用 forEach + async 回调，因为 forEach 不会等待 Promise：
// ❌ 错误！所有请求几乎同时发出，不等待
items.forEach(async (item) => {
await fetchItem(item); // 这个 await 只对当前回调有效，不影响 forEach 流程
});
并行执行：全部同时发起，统一等待完成
适合各任务相互独立、追求速度的场景（比如同时获取多个 API 数据）。
✅ 正确写法：先用 map 生成 Promise 数组，再用 Promise.all 等待全部结束：
async function processItemsParallel(items) {
const promises = items.map(item => fetchItem(item));
const results = await Promise.all(promises);
return results;
}
? 小技巧：如果某些请求可能失败，想避免整个 Promise.all 被拒绝，可用 Promise.allSettled：
const results = await Promise.allSettled( items.map(item => fetchItem(item)) ); const fulfilled = results.filter(r => r.status === 'fulfilled').map(r => r.value);
带错误处理和超时控制的健壮写法
真实项目中，单个异步操作常需容错。可在每次 await 外加 try/catch，或封装带超时的函数：
- 串行中跳过失败项：
for (const item of items) {
try {
const data = await fetchWithTimeout(`/api/${item}`, { timeout: 5000 });
console.log('success:', data);
} catch (err) {
console.warn(`Failed for ${item}:`, err.message);
continue; // 继续下一项
}
}
- 封装超时工具函数：
function timeout(ms, promise) {
return Promise.race([
promise,
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Timeout')), ms)
)
]);
}
// 使用
const data = await timeout(3000, fetch('/api/data'));
慎用：循环中动态增减待处理列表
如果循环过程中需要根据结果决定是否继续添加新任务（比如分页拉取），不要用固定长度的 for，改用 while + 条件控制：
async function fetchAllPages() {
let url = '/api/items';
const allItems = [];
while (url) {
const res = await fetch(url);
const data = await res.json();
allItems.push(...data.items);
url = data.nextPageUrl; // 下一页地址，可能为 null
}
return allItems;
}
