如何为多个POST请求创建动态Promise链式调用？

我正在寻找一种动态解决方案：我有一个元素数组，需要为数组中的每个元素发送POST请求，但必须等待前一个Promise解析完成后，再发送下一个请求，即动态链式调用.then()方法。

以下是我的静态代码，仅能处理commandPayloads数组中有2个元素的情况：

const commandPayloads = await createInitialCommands(copiedCommands);

commandPOSTFetch(commandPayloads[0], newResponseSetID).then(() => {
  commandPOSTFetch(commandPayloads[1], newResponseSetID);
});

const commandPOSTFetch = async (command, newResponseSetID) => {
  const res = await fetch(`https://${someWebSite}/${appID}//${interactionID}/response/${newResponseSetID}/commands.json`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(command),
    }
  );
  const data = await res.json();
  return data;
};

当数组元素数量超过2个时，该代码无法适用。我尝试使用forEach循环，但也无法实现顺序执行：

commandPayloads.forEach(async (command, i) => {
  const data = await commandPOSTFetch(command, newResponseSetID)
  console.log('in loop', data);
});

请问如何根据数组元素数量，实现动态的顺序POST请求逻辑，确保仅在前一个请求完成后再发送下一个？

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

直接用for...of遍历数组，每次循环等待当前请求完成后再执行下一个，天然保证顺序：

const commandPayloads = await createInitialCommands(copiedCommands);

// 顺序执行每个POST请求
for (const command of commandPayloads) {
  try {
    const data = await commandPOSTFetch(command, newResponseSetID);
    console.log('当前请求完成', data);
  } catch (err) {
    console.error('请求失败', err);
    // 可选：遇到错误是否中断后续请求，需要中断则添加return
    // return;
  }
}

const commandPOSTFetch = async (command, newResponseSetID) => {
  const res = await fetch(`https://${someWebSite}/${appID}/${interactionID}/response/${newResponseSetID}/commands.json`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(command),
    }
  );
  
  // 处理HTTP错误状态码
  if (!res.ok) {
    throw new Error(`请求失败，状态码：${res.status}`);
  }
  
  const data = await res.json();
  return data;
};

优势：代码逻辑清晰，容易理解，方便添加错误处理，适合大多数场景。

方法二：使用Array.reduce链式Promise（适合收集结果） #

如果需要收集所有请求的返回结果，可以用reduce构建Promise链，逐个执行请求：

const commandPayloads = await createInitialCommands(copiedCommands);

// 顺序执行并收集所有请求结果
const allResults = await commandPayloads.reduce(async (prevPromise, command) => {
  // 等待前一个请求完成
  const results = await prevPromise;
  // 执行当前请求
  const data = await commandPOSTFetch(command, newResponseSetID);
  // 将结果存入数组
  results.push(data);
  return results;
}, Promise.resolve([])); // 初始值为一个已resolve的空数组Promise

console.log('所有请求完成，结果：', allResults);

// commandPOSTFetch函数同方法一
const commandPOSTFetch = async (command, newResponseSetID) => {
  const res = await fetch(`https://${someWebSite}/${appID}/${interactionID}/response/${newResponseSetID}/commands.json`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(command),
    }
  );
  
  if (!res.ok) {
    throw new Error(`请求失败，状态码：${res.status}`);
  }
  
  const data = await res.json();
  return data;
};

优势：能一次性收集所有请求的结果，适合需要后续处理批量结果的场景。

为什么forEach无法实现顺序执行？ #

forEach会立即遍历数组所有元素，异步回调中的await不会阻塞forEach的遍历流程，导致所有请求几乎同时发起，无法保证顺序执行。

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