本文深入探讨了在javascript中使用`async/await`结合`fetch`进行异步循环操作时的常见陷阱与最佳实践。重点讲解了如何避免在`foreach`循环中错误使用`await`，并演示了如何利用`promise.all`与`map`方法，以高效、并行的方式处理一系列异步请求，从而提升代码的可读性和执行效率。
在现代Web开发中，处理异步操作是JavaScript的常见任务。async/await语法极大地简化了基于Promise的异步代码，使其看起来更像同步代码，提高了可读性。然而，在处理涉及循环的异步操作时，尤其是在与fetch API结合时，开发者常常会遇到一些误区。本文将详细阐述如何在循环中正确且高效地使用async/await与fetch。
理解async/await与forEach的限制
一个常见的错误是在Array.prototype.forEach回调函数内部直接使用await。例如，当需要遍历一个项目列表，并为每个项目发起一个fetch请求时，直观上可能会写出如下代码：
async function listarSchedulesProblem() {
let allUserData = [];
projetosList.forEach(async (item) => { // 这里的async回调是forEach的一部分
const [projetoId, projetoNome] = item.split("#");
let urlSchedule = `https://gitlab.com/api/v4/projects/${projetoId}/pipeline_schedules?private_token=glpat-uSjCXDMEZPh5x6fChMxs`;
// 尝试在这里使用await
const data = await getData(urlSchedule); // SyntaxError: await is only valid in async functions, async generators and modules.
// 即使没有语法错误，forEach也不会等待这些异步操作完成
allUserData.push(`${projetoId}#${data.description}#${data.owner.username}`);
});
// 在forEach完成时，allUserData可能还是空的，因为await没有被forEach等待
imprimirSchedule(allUserData);
}这段代码存在两个主要问题：
- await的上下文问题：await关键字只能在其所在的async函数内部使用。虽然forEach的回调函数被声明为async，但forEach本身并不知道它在处理异步操作，它会立即执行所有回调，并不会等待任何Promise解析。这意味着外部的listarSchedulesProblem函数不会等待forEach内部的所有fetch请求完成。
- 并发性与等待机制：forEach的设计初衷是同步迭代数组元素。它不会收集回调函数返回的Promise，也不会等待它们解析。因此，即使没有语法错误，allUserData在imprimirSchedule被调用时也可能为空，因为所有的fetch请求都在后台异步进行，而forEach已经“完成”了。
解决方案：结合Promise.all与map实现高效并行请求
解决上述问题的最佳实践是利用Array.prototype.map方法来生成一系列Promise，然后使用Promise.all来等待所有这些Promise并行解析。这种方法既能保持代码的简洁性，又能充分利用异步操作的并发性。
立即学习“Java免费学习笔记（深入）”；
以下是优化后的listarSchedules函数：
/**
* 模拟一个异步数据获取函数
* @param {string} url - 请求的URL
* @returns {Promise代码解析与最佳实践
-
projetosList.map(async item => { ... }):
- map方法会遍历projetosList数组中的每个元素，并对每个元素执行一个回调函数。
- 关键在于回调函数被声明为async。这意味着每次迭代都会返回一个Promise。map方法最终会返回一个包含所有这些Promise的新数组。
- 在async回调内部，我们可以安全地使用await来等待getData(urlSchedule)这个fetch操作完成。
-
await getData(urlSchedule):
- 这行代码会暂停当前async回调的执行，直到getData返回的Promise解析。
- 一旦Promise解析，其结果（即fetch到的JSON数据）就会赋值给data变量。
-
const { description, owner: { username } } = data;:
- 这是一个解构赋值的例子，它从data对象中提取description和嵌套的owner.username属性，使代码更简洁。
-
return \${projetoId}#${description}#${username}`;`:
- 每个async回调最终会返回一个字符串。这个字符串会被包裹在一个已解析的Promise中，并作为该Promise的最终值。
-
const allUserData = await Promise.all(allUserDataPromises);:
- Promise.all接收一个Promise数组作为参数。它会等待数组中所有的Promise都解析成功。
- 一旦所有Promise都成功解析，Promise.all自身会解析为一个新数组，其中包含了所有原始Promise的解析值，顺序与输入数组的顺序一致。
- 如果其中任何一个Promise被拒绝（即发生错误），Promise.all会立即拒绝，并返回第一个被拒绝Promise的错误。
- 通过在Promise.all前使用await，我们确保imprimirSchedule只有在所有数据都获取并处理完毕后才会被调用。
错误处理
在异步操作中，错误处理至关重要。在上述listarSchedules函数中，我们在getData函数内部和map回调的try...catch块中都增加了错误处理。
- getData内部的catch可以捕获网络请求或JSON解析层面的错误。
- map回调内部的try...catch则能捕获特定于单个项目数据处理的错误，确保即使某个项目的数据获取失败，也不会中断整个Promise.all链，而是可以返回一个默认值或记录错误。如果希望任何一个请求失败就导致整个Promise.all失败，则可以在catch块中重新抛出错误。
总结
当需要在循环中执行多个独立的异步操作（如fetch请求）并等待它们全部完成时，Promise.all与Array.prototype.map的组合是JavaScript中一个强大且高效的模式。它允许这些异步操作并行执行，显著提高了性能，同时async/await语法保持了代码的清晰和可读性。避免在forEach回调中直接使用await是理解这一模式的关键。
