使用 Promise.all 优雅地检测异步循环操作的整体完成-html教程-PHP中文网

使用 promise.all 优雅地检测异步循环操作的整体完成

当在 JavaScript 中使用 `forEach` 循环处理异步操作（如 `fetch` 请求）时，直接检测所有操作完成状态是一个常见挑战。由于 `forEach` 是同步执行的，它不会等待内部的异步任务完成。本文将深入探讨这一问题，并提供一个基于 `Promise.all` 的健壮解决方案，确保能够准确地在所有异步请求及其后续处理完成后执行特定逻辑，并解决可能遇到的“过早返回”问题。

异步循环的挑战：forEach 的局限性

在前端开发中，我们经常需要遍历一个数据集合，并为每个元素执行一个异步操作，例如从 API 获取详细信息。一个常见的模式如下所示：

function fetchInfo() {
    const tableRows = [/* an array of results */]; // 假设最多10行
    tableRows.forEach((row) => {
        const rowId = row.id; // 获取每行的ID
        fetch(`/api/data/${rowId}`) // 使用ID获取数据
            .then(response => response.json())
            .then(data => {
                // 使用获取到的数据更新对应的表格行
                console.log(`Row ${rowId} data fetched:`, data);
            })
            .catch(error => {
                console.error(`Error fetching data for row ${rowId}:`, error);
            });
    });
    // 在这里添加逻辑，无法准确知道所有fetch请求何时完成
    console.log("forEach loop finished initiating requests.");
}

登录后复制

上述代码中，forEach 循环会同步地遍历 tableRows 数组，并为每个元素发起一个 fetch 请求。然而，fetch 请求是异步的，这意味着 forEach 循环本身会立即完成执行，而不会等待任何一个 fetch 请求的响应。因此，在 forEach 循环结束后立即执行的任何代码，都无法保证所有异步数据都已获取并处理完毕。这导致我们无法准确地判断“表格是否完全加载完成”这一状态。

Promise.all：等待所有异步操作完成的利器

为了解决 forEach 在处理异步操作时的局限性，JavaScript 提供了 Promise.all 方法。Promise.all 接收一个 Promise 数组作为输入，并返回一个新的 Promise。这个新的 Promise 会在所有输入的 Promise 都成功解决（resolved）时解决，其结果是一个包含所有 Promise 解决值的数组，顺序与输入 Promise 的顺序一致。如果输入的任何一个 Promise 失败（rejected），则 Promise.all 返回的 Promise 也会立即失败，并返回第一个失败 Promise 的错误信息。

使用 Promise.all 的核心思想是：将 forEach 循环中每个异步操作返回的 Promise 收集起来，然后将这些 Promise 传递给 Promise.all。

实现步骤：

将异步操作封装为返回 Promise 的函数。
使用 Array.prototype.map() 方法将数据集合中的每个元素映射为一个 Promise。 map 方法会创建一个新数组，其中每个元素都是由原始数组元素通过回调函数转换而来的。
将这个 Promise 数组传递给 Promise.all()。
使用 await 或 .then() 来等待 Promise.all 返回的 Promise 解决。

下面是使用 Promise.all 改进后的代码示例：

async function fetchInfoAndDetectCompletion() {
    const tableRows = [
        { id: 'row1', data: {} },
        { id: 'row2', data: {} },
        { id: 'row3', data: {} }
    ]; // 假设的表格行数据

    // 使用 map 遍历 tableRows，为每个 row 发起 fetch 请求并返回一个 Promise
    // 重要的是，这个 Promise 链条要一直延伸到数据处理完毕（例如解析JSON）
    const fetchPromises = tableRows.map(row => {
        const rowId = row.id;
        return fetch(`/api/data/${rowId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json(); // 解析 JSON 数据，返回一个新的 Promise
            })
            .then(data => {
                // 可以在这里更新对应的表格行，或者将数据存储起来
                console.log(`Fetched data for ${rowId}:`, data);
                // 返回处理后的数据，或者任何你希望在 Promise.all 结果中得到的值
                return { id: rowId, data: data };
            })
            .catch(error => {
                console.error(`Error fetching or parsing data for row ${rowId}:`, error);
                // 如果某个请求失败，可以选择抛出错误让 Promise.all 失败，
                // 或者返回一个表示失败的特殊值，让 Promise.all 继续完成
                throw error; // 抛出错误会导致 Promise.all 立即拒绝
            });
    });

    try {
        // 等待所有 fetchPromises 都解决
        const allResults = await Promise.all(fetchPromises);
        console.log("所有表格行数据已完全加载并处理完毕！");
        console.log("所有结果:", allResults);
        // 在这里执行所有数据加载完成后需要执行的逻辑
        // 例如：显示加载完成提示，启用UI元素等
    } catch (error) {
        console.error("在加载部分或全部表格行数据时发生错误:", error);
        // 处理任何一个 Promise 失败的情况
    }
}

// 调用函数
fetchInfoAndDetectCompletion();

登录后复制

关键点解析：

tableRows.map(row => ...): map 方法遍历 tableRows 数组，对于每个 row，它执行回调函数并返回一个值。在这个例子中，回调函数返回的是一个完整的 Promise 链（从 fetch 到 response.json() 再到最终的数据处理）。
return response.json(): 这是至关重要的一步。fetch 函数返回的 Promise 仅在接收到 HTTP 响应头时解决。为了等待响应体（例如 JSON 数据）完全解析，你必须链式调用 response.json()（或 response.text() 等），response.json() 也会返回一个 Promise，这个 Promise 会在 JSON 解析完成后解决。确保 map 返回的是这个最终解析数据后的 Promise。
await Promise.all(fetchPromises): 这行代码会暂停 async 函数的执行，直到 fetchPromises 数组中的所有 Promise 都成功解决。一旦所有 Promise 都解决，allResults 将是一个数组，其中包含了每个 Promise 解决后的值（即每个表格行获取到的数据）。
错误处理 (try...catch): Promise.all 是“全有或全无”的。如果 fetchPromises 数组中的任何一个 Promise 失败，Promise.all 自身会立即拒绝，并返回第一个失败 Promise 的错误。因此，使用 try...catch 块来捕获潜在的错误至关重要。

解决“过早返回”的疑问

原问题中提到：“Promise.all(tableRows.map(row) => and it returned results before the api could respond.”

这通常是由于对 fetch 返回的 Promise 理解不足导致的。fetch(url) 调用本身返回的 Promise 会在 收到完整的 HTTP 响应（包括头部和状态码） 时解决，而不是在响应体（例如 JSON 数据）被完全解析时。

如果你的 map 函数是这样写的：

tableRows.map(row => fetch(`/api/data/${row.id}`))

登录后复制

那么 Promise.all 确实会在所有 fetch 请求的响应头都收到后解决，此时你得到的是一个 Response 对象数组，而不是解析后的 JSON 数据。要等待 JSON 数据完全解析，必须在 fetch 之后链式调用 response.json()，并确保 map 返回的是这个更深层的 Promise：

tableRows.map(row =>
    fetch(`/api/data/${row.id}`)
        .then(response => response.json()) // 确保等待 JSON 解析完成
)

登录后复制

只有当 map 函数返回的每个 Promise 都完全解决了其内部的所有异步步骤（包括网络请求和数据解析），Promise.all 才能真正地在所有数据“完全加载”后解决。

注意事项与总结

错误处理策略: 如果某个 fetch 请求失败，Promise.all 会立即拒绝。如果你希望即使部分请求失败，也能够等待所有成功的请求完成，可以考虑使用 Promise.allSettled()。Promise.allSettled() 会等待所有 Promise 都解决或拒绝，并返回一个包含每个 Promise 状态和结果的数组。
并发限制: 如果要处理的异步操作数量非常大，一次性发起所有请求可能会导致浏览器资源耗尽或服务器压力过大。在这种情况下，你需要实现并发控制（例如，使用 p-limit 或自定义队列）。
用户体验: 在等待所有数据加载时，务必向用户提供加载指示（如加载动画、骨架屏），以提升用户体验。

通过 Promise.all，我们可以有效地管理和协调多个并发的异步操作，并在所有操作完成后执行统一的逻辑。这不仅使代码更具可读性和维护性，也确保了对异步流程的精确控制，是现代 JavaScript 异步编程中的一项基本且强大的技术。

以上就是使用 Promise.all 优雅地检测异步循环操作的整体完成的详细内容，更多请关注php中文网其它相关文章！