JavaScript中如何让forEach循环等待嵌套API调用完成后再执行下一次迭代

首先明确：原生forEach是同步遍历逻辑，本身不支持等待异步操作完成再进入下一轮迭代，你需要换用串行执行的实现方式，具体操作如下： #

前提说明 #

你提到现有API没有使用async/await/Promise/Observables，默认是传统回调式的异步实现，要实现等待逻辑，首先需要能监听到API调用的完成事件，所以需要先对原有方法做轻量改造，补充完成回调通知。 #

实现步骤 #

1. 改造原有异步方法 #

给methodTwo和methodOne新增回调参数，在内部API完全执行完成后调用回调：

// 改造methodTwo，异步逻辑完成后触发传入的回调
methodTwo(doneCallback: () => void) {
    // 原有API调用逻辑
    // 示例：如果原有是XHR调用，就在onload/onerror回调最后执行doneCallback
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '你的请求地址');
    xhr.onload = () => {
        // 原有逻辑处理
        doneCallback(); // 通知完成
    }
    xhr.send();
}

// 改造methodOne，等内部methodTwo执行完成后再触发自身的回调
methodOne(item: 你的item类型, doneCallback: () => void) {
    // 原有逻辑
    methodTwo(doneCallback);
}

2. 替换forEach为递归串行遍历 #

let currentIndex = 0;
function runNextItem() {
    // 所有元素遍历完成则退出
    if (currentIndex >= list.length) return;
    const currentItem = list[currentIndex];
    currentIndex++;
    // 执行当前项逻辑，完成后自动进入下一项
    methodOne(currentItem, runNextItem);
}
// 启动遍历
runNextItem();

可选优化方案（允许使用Promise时） #

如果项目支持用Promise，也可以先把回调式方法包装成Promise，再用for循环+await实现，代码可读性更高：

// 包装methodOne为返回Promise的方法
function promisifyMethodOne(item: 你的item类型): Promise<void> {
    return new Promise((resolve) => {
        methodOne(item, resolve);
    })
}

// 串行执行遍历
async function serialRunList() {
    // 注意：不能用forEach，要用普通for循环/for of循环才支持await暂停
    for (const item of list) {
        await promisifyMethodOne(item);
    }
}
serialRunList();

注意事项 #

如果完全无法改造methodOne和methodTwo的内部实现，也拿不到API调用的完成回调，无法实现精准的等待逻辑，仅能通过setTimeout设置固定延迟模拟，误差大且稳定性差，不推荐使用。

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