本教程旨在解决JavaScript中循环调用异步（Promise）函数并聚合其结果的常见挑战。我们将探讨如何利用async/await语法和Promise.all()方法，以同步的思维模式处理一系列异步操作，高效地并行执行Promise，并最终收集所有成功解决的值，从而实现代码的清晰、可读性和高效性。
在现代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异步代码的关键。
以上就是JavaScript中异步循环调用与Promise结果聚合的最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524082.html
微信扫一扫 
支付宝扫一扫 
