在现代javascript应用开发中，处理异步操作是不可避免的。尤其当我们需要从一个初始的异步数据源获取列表，然后对列表中的每个元素再次执行一个异步操作，并将所有这些操作的结果聚合起来时，传统的for循环结合.then()方法往往会使代码变得复杂且难以正确管理异步流。
挑战：循环中异步操作结果的聚合
考虑这样一个场景：首先需要获取一个订单列表，然后对列表中的每个订单，通过其买家ID获取买家的邮箱地址。myListOrdersFunction()和myGetMemberFunction()都是返回Promise的异步函数。目标是收集所有买家的邮箱地址，并将其作为API响应的一部分返回。
以下是原始代码中尝试解决此问题的方式，它展示了常见的陷阱：
const myListOrdersFunction = require('backend/test').myListOrdersFunction;
const myGetMemberFunction = require('backend/getMember').myGetMemberFunction;
$w.onReady(function () {
const emailList = myListOrdersFunction()
.then(listedOrders => {
const loginEmails = [];
for (const order of listedOrders) {
myGetMemberFunction(order.buyer.memberId)
.then(member => {
loginEmails.push(member.loginEmail);
})
.catch(error => {
console.log(error);
});
}
// 问题：loginEmails 在所有 myGetMemberFunction Promise 解决之前就被返回了
return loginEmails;
})
.catch(error => {
console.log(error);
});
const printEmails = async () => {
const a = await emailList;
console.log("a ",a); // 此时 a 可能是空数组，因为内部的 Promise 还在执行
}
printEmails();
});上述代码的问题在于，for循环内部的myGetMemberFunction().then(...)是异步执行的。当循环完成并执行return loginEmails;时，loginEmails数组很可能还是空的，因为所有内部的Promise都还没有来得及解决并向数组中添加数据。emailList这个Promise会立即解决为一个空数组（或者在Promise链中传递一个空数组），而不是等待所有异步操作完成后再返回包含所有邮箱的数组。
解决方案：结合 async/await 与 Promise.all()
解决此类问题的最佳实践是利用async/await语法糖和Promise.all()方法。async/await允许我们以更接近同步代码的方式编写异步逻辑，而Promise.all()则用于并行执行多个Promise，并等待它们全部解决。
立即学习“Java免费学习笔记（深入）”；
核心思想
- 获取初始数据： 使用await等待第一个Promise（获取订单列表）完成。
- 创建Promise数组： 对获取到的列表数据进行map操作，将每个元素转换为一个返回Promise的异步函数调用，从而得到一个Promise数组。
- 并行执行并聚合结果： 使用Promise.all()等待这个Promise数组中的所有Promise都解决，然后它会返回一个包含所有解决值的数组。
示例代码
以下是使用async/await和Promise.all()优化后的解决方案：
const myListOrdersFunction = require('backend/test').myListOrdersFunction;
const myGetMemberFunction = require('backend/getMember').myGetMemberFunction;
// 建议将异步逻辑封装在 async 函数中，例如在 API 路由处理函数中
// 或者对于 Wix HTTP Functions，直接在 $w.onReady 中使用 async
$w.onReady(async function () {
try {
// 1. 获取初始数据：等待订单列表 Promise 解决
const listedOrders = await myListOrdersFunction();
// 2. 创建 Promise 数组：为每个订单的买家获取邮箱，生成一系列 Promise
const memberPromises = listedOrders.map(order =>
myGetMemberFunction(order.buyer.memberId)
);
// 3. 并行执行并聚合结果：等待所有获取邮箱的 Promise 解决
// members 将是一个包含所有 member 对象的数组
const members = await Promise.all(memberPromises);
// 4. 提取所需数据：从 member 对象中提取 loginEmail
const loginEmails = members.map(member => member.loginEmail);
// 此时 loginEmails 包含了所有会员的邮箱
console.log("所有会员邮箱:", loginEmails);
// 假设这里是 Wix HTTP Functions 的上下文，可以构建并返回响应
// return ok({ "emails": loginEmails });
} catch (error) {
console.error("处理过程中发生错误:", error);
// 可以在这里返回错误响应
// return serverError({ "message": "Failed to retrieve emails", "error": error.message });
}
});代码解析
- $w.onReady(async function () { ... });: 将$w.onReady回调函数声明为async，这允许我们在其中使用await关键字。
- const listedOrders = await myListOrdersFunction();: 这行代码会暂停async函数的执行，直到myListOrdersFunction()返回的Promise解决并提供订单列表数据。一旦解决，listedOrders将包含订单数组。
-
const memberPromises = listedOrders.map(order => myGetMemberFunction(order.buyer.memberId));:
- listedOrders.map(...)会遍历listedOrders数组中的每一个order。
- 对于每个order，它调用myGetMemberFunction(order.buyer.memberId)，这个函数会返回一个Promise。
- map方法最终会返回一个Promise数组，其中每个Promise都代表着获取一个会员邮箱的操作。
-
const members = await Promise.all(memberPromises);:
- Promise.all()接收一个Promise数组作为参数。
- 它会并行地执行这些Promise。
- await关键字会暂停async函数的执行，直到Promise.all()中的所有Promise都成功解决。
- 如果所有Promise都成功解决，Promise.all()会返回一个新Promise，该Promise解决为一个数组，数组中的元素是原始Promise数组中每个Promise的解决值，且顺序与原始Promise数组一致。
- 如果其中任何一个Promise被拒绝（发生错误），Promise.all()会立即拒绝，并返回第一个拒绝的Promise的错误信息。
- 因此，members将是一个包含所有会员对象的数组。
- const loginEmails = members.map(member => member.loginEmail);: 在所有会员数据都已获取并聚合到members数组后，我们再使用map方法轻松地从中提取出每个会员的loginEmail，生成最终的邮箱列表。
- try...catch: 使用try...catch块来捕获在async函数执行过程中可能发生的任何错误，无论是myListOrdersFunction还是myGetMemberFunction或Promise.all中抛出的错误，都能被统一处理。
注意事项与最佳实践
- 错误处理： Promise.all()在遇到第一个拒绝的Promise时会立即拒绝。如果希望即使某些Promise失败也能继续处理其他成功的Promise，可以考虑使用Promise.allSettled()。它会等待所有Promise都解决（无论成功或失败），并返回一个包含每个Promise结果状态和值的数组。
- 并发限制： 对于非常大的Promise数组（例如成千上万个），同时发起大量网络请求可能会导致性能问题或资源耗尽。在这种情况下，可能需要实现一个并发控制器，限制同时运行的Promise数量。
- 可读性： async/await结合Promise.all()极大地提高了异步代码的可读性和可维护性，使其更接近同步代码的逻辑流。
- 上下文： 在Wix HTTP Functions等环境中，通常需要在async function中返回ok(response)或serverError(error)等来完成API响应。
总结
通过本教程，我们学习了如何利用async/await和Promise.all()优雅且高效地处理JavaScript中循环调用异步函数并聚合结果的场景。这种模式不仅解决了异步操作顺序和结果收集的难题，还显著提升了代码的可读性和健壮性。掌握这一技术是编写高质量现代JavaScript异步代码的关键。
