如何实现Promise逐个resolve时立即返回结果以优化加载速度？

前端优先方案 #

实时处理每个完成的请求 #

不需要等待所有Promise完成，每个请求成功后立刻处理结果，实现“懒加载”效果：

async function retrieve_data() {
    let request_urls = [/* 你的API端点列表 */];
    let results = [];

    // 单个请求的处理逻辑，完成后立即更新结果
    const handleRequest = async (url) => {
        const res = await fetch(url);
        const data = await res.json();
        results.push(data);
        // 这里写拿到数据后的业务逻辑，比如更新页面
        renderNewData(data);
    };

    // 批量发起所有请求，各自独立处理
    request_urls.forEach(url => handleRequest(url));

    // 可选：如果需要等待所有请求完成后做收尾操作
    await Promise.all(request_urls.map(url => handleRequest(url)));
    console.log("所有请求处理完毕");
}

function renderNewData(data) {
    // 示例：将新数据追加到页面
    document.getElementById('result-container').innerHTML += `<div>${JSON.stringify(data)}</div>`;
}

保持结果顺序的实时处理 #

如果需要结果数组和请求顺序严格对应，即使某请求延迟完成，也能放到正确位置：

async function retrieve_data() {
    let request_urls = [/* 你的API端点列表 */];
    let results = new Array(request_urls.length);

    const handleRequest = async (url, index) => {
        const res = await fetch(url);
        const data = await res.json();
        results[index] = data;
        // 按顺序更新UI或处理数据
        renderDataByIndex(data, index);
    };

    // 发起带索引标记的请求
    const requestPromises = request_urls.map((url, idx) => handleRequest(url, idx));

    await Promise.all(requestPromises);
    console.log("所有请求完成，结果数组:", results);
}

function renderDataByIndex(data, index) {
    console.log(`第${index+1}条数据加载完成:`, data);
    // 这里可以根据索引更新对应位置的UI
}

后端辅助优化方案 #

如果前端方案仍有性能瓶颈，可以结合后端改造：

• 流式返回结果：后端使用Server-Sent Events（SSE），数据库查询到部分结果就立刻推送给前端，前端实时接收并处理，无需等待全量查询完成。
• 拆分查询接口：将大型查询拆分为多个小接口，前端按优先级发起请求，优先加载核心数据，非核心数据延后加载。

关于Promise工具函数的说明 #

Promise.all()需要等待所有请求完成才会返回，无法实现实时加载；Promise.any()仅返回第一个成功的结果，也不符合需求。上面的方案通过单独监听每个Promise的状态，实现了“完成一个处理一个”的效果，是更贴合需求的实现方式。

内容的提问来源于stack exchange，提问作者Muhammad Yahya Warraich