如何让JavaScript forEach中的HTTP请求串行发送而非并发？

你当前的代码里，forEach不会等待异步回调完成，所有fetch请求会被同时触发，容易造成服务器请求过载。以下几种方法可以实现串行请求，每次只发送一个请求：

方法一：使用for...of循环（最直观） #

这是实现串行异步操作最简单的方式，for...of会等待每次循环内的await执行完成后，再进入下一次循环：

const main = async () => {
    for (const i of items) {
        const response = await fetch(/* 请求URL及配置 */);
        // 可在此处理响应，比如解析JSON：const data = await response.json();
    }
}

main();

方法二：使用Array.reduce（适合需要累积结果的场景） #

通过reduce串联Promise，每次等待前一个请求完成后再发起新请求：

const main = async () => {
    await items.reduce(async (prevTask, i) => {
        // 等待上一个异步任务完成
        await prevTask;
        // 发起当前请求
        const response = await fetch(/* 请求URL及配置 */);
        // 处理响应逻辑
    }, Promise.resolve()); // 初始值为已完成的Promise
}

main();

方法三：手动while循环（精细控制流程） #

如果需要更灵活的流程控制，比如中途中断循环，可以用while循环：

const main = async () => {
    let idx = 0;
    const total = items.length;
    while (idx < total) {
        const item = items[idx];
        const response = await fetch(/* 请求URL及配置 */);
        // 处理响应
        idx++;
    }
}

main();

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