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

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);

/**
 * 模拟一个异步函数，用于获取表格行数据。
 * 实际应用中，这将是一个真正的fetch API调用。
 * @param {string} rowId - 表格行的ID。
 * @returns {Promise<Object>} - 包含行数据的Promise。
 */
async function fetchRowData(rowId) {
    console.log(`Fetching data for rowId: ${rowId}...`);
    // 模拟API请求的延迟
    await new Promise(resolve => setTimeout(resolve, Math.random() * 1500 + 500)); // 0.5s - 2s 随机延迟

    // 模拟API响应
    if (rowId === 'row3') {
        // 模拟一个错误响应
        throw new Error(`Failed to fetch data for rowId: ${rowId}`);
    }
    return { id: rowId, content: `Data for ${rowId} loaded successfully.` };
}

/**
 * 负责获取所有表格行信息并在所有请求完成后通知。
 */
async function fetchAllTableInfoAndNotify() {
    // 模拟表格行数据数组，最多10行
    const tableRows = Array.from({ length: 5 }, (_, i) => ({ id: `row${i + 1}` }));

    // 使用map创建所有fetch操作的Promise数组
    const fetchPromises = tableRows.map(row => {
        const rowId = row.id;
        // 确保map返回的是一个完整的Promise链
        return fetchRowData(rowId)
            .then(data => {
                // 在这里可以对单行数据进行处理，例如更新DOM
                console.log(`Processing data for ${rowId}:`, data.content);
                return data; // 返回处理后的数据，供Promise.all收集
            })
            .catch(error => {
                console.error(`Error for ${rowId}:`, error.message);
                // 即使单个请求失败，我们也希望Promise.all能够完成。
                // 因此，这里捕获错误并返回一个表示失败的对象，而不是让Promise.all拒绝。
                return { id: rowId, error: error.message };
            });
    });

    try {
        console.log("Initiating all table data fetches...");
        // 等待所有fetchPromises数组中的Promise完成
        const allResults = await Promise.all(fetchPromises);

        console.log("All table data fetches completed!");
        console.log("Collected results:", allResults);

        // 此时，所有表格行的数据都已加载或其错误已处理。
        // 可以执行最终的UI更新、隐藏加载指示器、触发完成事件等。
        alert("表格数据已全部加载完毕！");
        document.getElementById('loading-indicator').style.display = 'none'; // 假设有一个加载指示器
    } catch (error) {
        // 这个catch块只会在Promise.all本身拒绝时触发。
        // 由于我们在单个fetchPromises中已经捕获了错误，
        // 除非有未被捕获的Promise拒绝，否则Promise.all会解析。
        console.error("An unexpected error occurred during Promise.all:", error);
    }
}

// 假设页面上有一个加载指示器
document.body.innerHTML += '<div id="loading-indicator" style="font-weight: bold; color: blue;">Loading table...</div>';

// 在页面加载完成后触发数据获取过程
window.addEventListener('load', fetchAllTableInfoAndNotify);