如何高效管理与监听JavaScript中并行异步操作的完成状态

window.addEventListener('load', fetchInfo);

function fetchInfo() {
    const tableRows = [ /* 假设这是一个包含行数据的数组，例如 [{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:`, data);
            })
            .catch(error => {
                console.error(`Error loading data for row ${rowId}:`, error);
            });
    });
    // 注意：这里的代码会立即执行，不会等待所有fetch请求完成
    console.log("forEach循环已完成，但fetch请求可能仍在进行中。");
}

window.addEventListener('load', fetchAllTableData);

async function fetchAllTableData() {
    const tableRows = [
        { id: 1, name: 'Row 1' },
        { id: 2, name: 'Row 2' },
        { id: 3, name: 'Row 3' }
        // ... 假设最多10行数据
    ];

    // 使用Array.prototype.map()将每个行数据转换为一个fetch Promise
    const fetchPromises = tableRows.map(row => {
        const rowId = row.id;
        console.log(`Initiating fetch for row ID: ${rowId}`);
        return fetch(`/api/data/${rowId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                // 在这里可以处理每个单独的行数据，例如更新DOM或进行局部处理
                console.log(`Data for row ${rowId} received:`, data);
                return { id: rowId, data: data }; // 返回处理后的数据，供Promise.all收集
            })
            .catch(error => {
                console.error(`Failed to fetch data for row ${rowId}:`, error);
                // 如果任何一个fetch失败都应导致Promise.all整体拒绝，则直接抛出错误
                throw error;
                // 如果希望即使有失败也收集所有结果，可以返回一个表示失败的对象
                // return { id: rowId, error: error, status: 'rejected' };
            });
    });

    try {
        // 等待所有fetch请求完成
        const allResults = await Promise.all(fetchPromises);
        console.log("所有表格行数据加载完成！");
        console.log("所有结果:", allResults);

        // 在这里执行所有请求完成后需要进行的逻辑，