async await用法 循环完成后 执行await

### 如何在所有循环迭代完成后使用 `async` 和 `await`

为了确保所有的异步操作在一个循环内按预期顺序完成，在 JavaScript 中可以采用多种方法来实现这一点。直接在像 `forEach` 这样的传统遍历函数中使用 `async/await` 并不会达到期望的效果，因为这些方法并不会等待内部的异步回调结束[^2]。

一种有效的方法是利用 `for...of` 循环配合 `async/await` 来逐个处理数组中的每一项并等待其完成：

async function processItemsSequentially(items) {
    for (const item of items) {
        const response = await someAPICall(item);
        console.log('Processed:', response);
    }
}

如果目标是在并发情况下启动多个请求但在继续之前等待它们全部解决，则可考虑创建一个由 Promise 组成的数组，并通过 `Promise.all()` 同时运行这些 Promises:

async function processItemsConcurrently(items) {
    // 创建一个包含所有API调用返回值(Promise对象)的数组
    const promises = items.map(async (item) => {
        return await someAPICall(item); 
    });

    // 等待所有Promises都解析完毕
    const results = await Promise.all(promises);

    // 输出结果
    results.forEach(result => console.log('Result:', result));
}

上述两种方式都能满足不同场景下的需求——前者适用于需要依次执行的任务序列；后者则适合于那些能够独立并行执行而不依赖彼此的结果的情况。

对于给定的例子，可以通过修改代码结构使其按照正确的顺序工作：

// 修改后的版本会等到所有的 API 调用结束后再打印 4 和 5
async function example1() {
    let promises = [
        Promise.resolve(1),
        Promise.resolve(2),
        Promise.resolve(3)
    ];

    // 将每个 promise 的处理封装到一个新的 Promise 数组里
    const processedPromises = promises.map(promise =>
        (async () => {
            let result = await promise;
            console.log(result);
        })()
    );

    // 等待所有新的 Promise 完成之后才继续往下走
    await Promise.all(processedPromises);

    console.log(4);
    console.log(5);
}

example1();

这样就可以保证日志输出先是来自各个 `promise` 解析后的数值，最后才是数字 4 和 5。