在JavaScript中优雅地管理并发异步操作并检测其完成

本文深入探讨了在JavaScript中处理多个并发异步操作（如API请求）并准确检测所有操作完成状态的策略。我们将重点介绍如何利用Promise.all结合async/await来高效地管理这类场景，确保在所有数据加载完毕后执行后续逻辑，从而解决传统循环中难以追踪异步完成状态的问题。

理解异步操作的挑战

在现代Web开发中，从API获取数据以填充UI元素（例如表格行）是一个常见需求。当需要为多个UI元素并行地发起独立的API请求时，我们面临一个核心挑战：如何准确地知道所有这些异步请求何时全部完成。例如，在一个包含多行的表格中，每一行可能需要根据其ID发起一个独立的fetch请求来获取详细信息。只有当所有行的信息都成功加载并渲染到页面后，我们才能认为表格“完全加载”完毕，并可能需要触发一个后续操作（如隐藏加载指示器、启用某个按钮等）。

传统的forEach循环虽然可以遍历数组并为每个元素执行操作，但它本身并不会等待内部的异步操作完成。这意味着，如果在forEach循环之后立即执行代码，那段代码很可能在所有fetch请求完成之前就已经运行了，导致无法正确地检测到所有异步任务的完成状态。

为什么 forEach 不足以解决问题

考虑以下场景，我们有一个表格行数组，需要为每行获取数据：

立即学习“Java免费学习笔记（深入）”；

function fetchInfo() {
    const tableRows = [ /* an array of results, e.g., [{id: '1'}, {id: '2'}] */ ];

    tableRows.forEach((row) => {
        const rowId = row.id; // 获取每行的ID
        fetch(`/api/data/${rowId}`) // 使用ID获取数据
            .then(response => response.json())
            .then(data => {
                // 使用数据填充表格行
                console.log(`Row ${rowId} data loaded.`);
            })
            .catch(error => {
                console.error(`Error loading data for row ${rowId}:`, error);
            });
    });

    // 此时，所有fetch请求可能都还在进行中，
    // 这段代码会立即执行，无法得知何时所有请求完成。
    console.log("forEach loop finished, but fetches might still be pending.");
}

window.addEventListener('load', fetchInfo);

在这种情况下，console.log("forEach loop finished...") 会在所有fetch请求发送后立即打印，而不是在所有请求的数据都返回并处理完毕后。如果我们需要一个“事件监听器”来检测所有fetch操作的完成，forEach本身无法提供这样的机制。

利用 Promise.all 实现并发与等待

为了解决上述问题，JavaScript提供了Promise.all方法，它专门用于处理多个Promise的并发执行并等待它们全部完成。

Promise.all 工作原理

Promise.all接收一个Promise数组作为输入，并返回一个新的Promise。这个新的Promise会在以下两种情况之一发生时解析或拒绝：

MagickPen

在线AI英语写作助手，像魔术师一样在几秒钟内写出任何东西。

下载

1. 解析 (Resolve): 当输入数组中的所有Promise都成功解析时，Promise.all返回的Promise也会解析。它的解析值是一个数组，包含了所有输入Promise的解析值，顺序与输入数组中Promise的顺序一致。
2. 拒绝 (Reject): 只要输入数组中有一个Promise拒绝，Promise.all返回的Promise就会立即拒绝，其拒绝原因就是第一个拒绝的Promise的拒绝原因。

结合 async/await 的最佳实践

为了使异步代码更易读、更像同步代码，我们可以将Promise.all与async/await语法结合使用。async函数允许我们在其中使用await关键字来暂停函数的执行，直到一个Promise解析。

当将Promise.all与async/await结合时，通常的模式是：

1. 使用Array.prototype.map()方法遍历需要执行异步操作的数组。
2. 在map的回调函数中，为每个元素返回一个Promise（例如，一个fetch请求）。
3. map方法会返回一个Promise数组。
4. 使用await Promise.all(promiseArray)来等待所有这些Promise完成。

需要注意的是，用户在问题中提到Promise.all“返回结果在API响应之前”。这通常是因为map函数没有正确地返回fetch操作所产生的Promise，或者fetch之后的.then()链没有被正确地包含在返回的Promise中。确保map函数返回的是一个完整的、代表该项异步操作的Promise链至关重要。

完整示例：检测所有 Fetch 请求完成

下面是一个完整的示例，演示如何使用Promise.all和async/await来等待所有fetch请求完成，并在此之后执行通知逻辑：

/**
 * 模拟一个异步函数，用于获取表格行数据。
 * 实际应用中，这将是一个真正的fetch API调用。
 * @param {string} rowId - 表格行的ID。
 * @returns {Promise