JavaScript异步循环与数据收集技巧

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript高效处理异步循环与数据收集方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

理解循环内异步操作的挑战

在JavaScript中，当我们需要在一个循环内部执行异步操作（例如，调用返回Promise的函数），并最终收集所有这些操作的结果时，常常会遇到挑战。一个常见的错误模式是试图在循环内部的Promise .then() 回调中收集数据，并期望在循环结束后立即返回这些数据。

考虑以下场景：我们有一个订单列表，需要为每个订单的买家获取其邮箱地址。myListOrdersFunction() 和 myGetMemberFunction() 都是返回Promise的异步函数。

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返回一个Promise，
                // 其结果在循环结束后才可能可用
                myGetMemberFunction(order.buyer.memberId)
                    .then(member => {
                        loginEmails.push(member.loginEmail);
                    })
                    .catch(error => {
                        console.error("获取成员信息失败:", error);
                    });
            }
            // 此时 loginEmails 很可能还是空的，因为内部的Promise还未解决
            return loginEmails;
        })
        .catch(error => {
            console.error("获取订单列表失败:", error);
        });

    // 后续代码尝试访问 emailList，但它可能是一个尚未解决的Promise，
    // 或者即使解决了，也可能包含一个空数组。
    const printEmails = async () => {
        const a = await emailList;
        console.log("a ", a); // 可能会输出 "a []"
    }
    printEmails();
});

上述代码的问题在于，for...of 循环是同步执行的。当循环执行到 myGetMemberFunction(order.buyer.memberId).then(...) 时，它只是启动了一个异步操作并注册了一个回调函数，并不会等待该异步操作完成。因此，当循环结束后，return loginEmails; 这行代码会立即执行，而此时 loginEmails 数组很可能仍然是空的，因为所有 myGetMemberFunction 返回的Promise都还在后台等待解决。最终，emailList Promise解决时，其值将是一个空数组。

解决方案：async/await 与 Promise.all

为了正确地处理这种场景，我们需要一种机制来等待循环中所有异步操作都完成后，再统一收集它们的结果。async/await 语法结合 Promise.all 方法是解决此问题的最佳实践。

1. async/await: 提供了更同步、更易读的方式来编写异步代码，避免了深层嵌套的 .then() 回调。
2. Promise.all: 接收一个Promise数组，并返回一个新的Promise。这个新的Promise会在所有输入Promise都解决后解决，其解决值为一个包含所有输入Promise解决值的数组（顺序与输入Promise的顺序一致）。如果任何一个输入Promise失败，Promise.all 返回的Promise也会立即失败。

下面是使用 async/await 和 Promise.all 优化的解决方案：

const myListOrdersFunction = require('backend/test').myListOrdersFunction;
const myGetMemberFunction = require('backend/getMember').myGetMemberFunction;

// 确保 $w.onReady 函数是 async 函数，以便在其中使用 await
$w.onReady(async function () {
    try {
        // 1. 等待获取订单列表
        const listedOrders = await myListOrdersFunction();

        // 2. 将每个订单的成员ID转换为一个获取成员信息的Promise
        // 使用 map 遍历 listedOrders，为每个订单创建一个 myGetMemberFunction 的 Promise 调用
        const memberPromises = listedOrders.map(order => 
            myGetMemberFunction(order.buyer.memberId)
        );

        // 3. 使用 Promise.all 等待所有成员信息获取完毕
        // Promise.all 会返回一个包含所有成员对象的数组
        const members = await Promise.all(memberPromises);

        // 4. 从成员对象数组中提取所有邮箱地址
        const loginEmails = members.map(member => member.loginEmail);

        // 5. 现在 loginEmails 包含了所有成员的邮箱，可以进行后续操作
        console.log("所有收集到的邮箱:", loginEmails);

        // 假设这是一个API响应处理函数，你可以这样返回：
        // return ok({
        //    "emails": loginEmails
        // });

    } catch (error) {
        // 统一处理可能发生的错误
        console.error("处理过程中发生错误:", error);
        // 假设这是一个API响应处理函数，你可以这样返回错误：
        // return serverError(error);
    }
});

代码详解

1. $w.onReady(async function () { ... });: 将 onReady 的回调函数声明为 async，这样我们就可以在其中使用 await 关键字。
2. const listedOrders = await myListOrdersFunction();: await 关键字会暂停当前 async 函数的执行，直到 myListOrdersFunction() 返回的Promise解决。一旦解决，其结果（订单列表）就会赋值给 listedOrders。
3. const memberPromises = listedOrders.map(order => myGetMemberFunction(order.buyer.memberId));: 这是一个关键步骤。我们使用 Array.prototype.map() 方法遍历 listedOrders 数组。对于每个订单，我们调用 myGetMemberFunction(order.buyer.memberId)。注意，这里我们没有使用 await，因为我们希望这些 myGetMemberFunction 调用能够并发执行，而不是一个接一个地串行执行。map 方法最终会返回一个由所有 myGetMemberFunction 返回的Promise组成的数组。
4. const members = await Promise.all(memberPromises);: await Promise.all(memberPromises) 会暂停 async 函数的执行，直到 memberPromises 数组中的所有Promise都解决。当它们全部解决后，Promise.all 会返回一个新数组，其中包含了每个Promise的解决值（即每个成员对象），并且这个新数组的顺序与 memberPromises 数组中Promise的顺序一致。
5. const loginEmails = members.map(member => member.loginEmail);: 现在我们已经有了一个包含所有成员对象的数组 members，我们可以再次使用 map 方法，轻松地从中提取出所有成员的 loginEmail，得到最终的 loginEmails 数组。
6. 错误处理 (try...catch): async/await 使得错误处理变得更加直观。任何在 async 函数中被 await 的Promise如果被拒绝，都会被 try...catch 块捕获，就像同步代码中的异常一样。这比在每个 .then().catch() 链中处理错误要简洁得多。

注意事项与最佳实践

• 并发性: Promise.all 的一个主要优点是它能够并发执行多个Promise。这意味着所有获取成员信息的请求几乎是同时发出的，而不是一个请求完成后再发送下一个，这大大提高了效率。
• 错误处理: Promise.all 是“全有或全无”的。如果 Promise.all 中的任何一个Promise被拒绝，那么 Promise.all 返回的Promise也会立即被拒绝，并且只会返回第一个拒绝的原因。如果你需要即使有部分失败也收集所有成功的结果，可以考虑使用 Promise.allSettled()（ES2020），它会等待所有Promise都解决（无论是成功还是失败），并返回一个包含每个Promise状态和值的数组。
• 性能考量: 如果 listedOrders 数组非常大（例如成千上万个），同时发起大量网络请求可能会对服务器造成压力或导致浏览器内存溢出。在这种情况下，你可能需要实现并发限制（例如，使用 p-limit 或自定义 Promise 队列）来控制同时进行的请求数量。
• 可读性: async/await 极大地提高了异步代码的可读性和可维护性，使其更接近同步代码的逻辑流。

总结

在JavaScript中处理循环内部的异步操作并收集结果时，async/await 结合 Promise.all 是一个强大且优雅的模式。它不仅解决了传统Promise链可能导致的竞态条件和数据不完整问题，还通过更清晰的语法提升了代码的可读性和错误处理的便捷性。掌握这一模式对于编写高效、健壮的现代JavaScript异步代码至关重要。

到这里，我们也就讲完了《JavaScript异步循环与数据收集技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！