JavaScript/Node.js Promise数组异步处理问题求助

问题背景 #

开发时碰到Promise数组的异步处理坑：在switch语句里调用从API加载数据的realWool函数，对返回数组排序后，后续for循环里用这个排序数组时拿到的是undefined。知道要用await或then但没搞对用法，临时用setTimeout凑活，但数组长度不固定（少则5个，多则上百个），这种方案根本不靠谱，求正确的异步处理方式。

错误根源分析 #

1. realWool函数的异步逻辑错误 #

realWool里用forEach遍历数组，且回调是async函数——但forEach不会等待异步回调执行完成，会直接走完循环，然后立刻返回空的realWoolArray，导致后续拿到的数组还没被异步操作填充。

2. loadPage里的冗余写法 #

await Promise.resolve(realWool(...))完全没必要，因为realWool本身就是async函数，直接await realWool(...)即可。

修复方案 #

步骤1：修复realWool函数 #

把forEach换成map，生成一个Promise数组，再用Promise.all等待所有异步操作完成后，再返回填充好的数组：

window.realWool = async function realWool(pouchArr) {
    let divider = 1000000000000000000n;
    // 用map生成Promise数组，每个Promise对应一个异步操作
    const promises = pouchArr.map(async pouch => {
        let availAmount = await pouchContract.amountAvailable(pouch.pouchID)
        availAmount = Number(BigInt(availAmount.toString()) * 100n / divider) / 100
        availAmount = Math.floor(availAmount * 100) / 100
        let rWool = pouch.pouchWool - availAmount
        return {pouchID: pouch.pouchID, realWool: rWool, pouchTime: pouch.pouchTime}
    });
    // 等待所有异步操作完成，拿到完整数组
    return Promise.all(promises)
}

步骤2：简化并修复loadPage函数 #

去掉冗余的Promise.resolve，直接await realWool，确保for循环在异步操作完成后执行：

let sorted = []
let limit = 10
async function loadPage(slcLimit) {
    let i
    let filter = document.getElementById("show-filter").value

    if (sorted.length === 0) {
        switch (filter) {
            case "1":
                // 直接await realWool，拿到完整数组后排序
                const realWoolArrAsc = await realWool(pagingPouches)
                sorted = realWoolArrAsc.sort((a, b) => parseFloat(a.realWool) - parseFloat(b.realWool))
                break;
            case "2":
                const realWoolArrDesc = await realWool(pagingPouches)
                sorted = realWoolArrDesc.sort((a, b) => parseFloat(b.realWool) - parseFloat(a.realWool))
                break;
        }
    }

    // 此时sorted已经是填充好的数组，直接循环即可
    for (i = startingLimit; i < (startingLimit + limit); i++) {
        // 注意：原代码里用的是sorted[i].ID，但realWool返回的是pouchID，这里要对应上
        console.log(sorted[i].pouchID + " - " + sorted[i].realWool)
    }
}

额外注意点 #

原代码里for循环中用了sorted[i].ID，但realWool返回的对象属性是pouchID，这里要统一，否则还是会出现undefined。

内容的提问来源于stack exchange，提问作者nodejs_newbie