React中实现Map内Fetch请求串行执行，避免后端崩溃

要实现串行请求（等待前一个请求响应后再发起下一个），只需修改RequestComputers函数的遍历方式，用for...of配合async/await替代map：

async function RequestComputers(Computers) {
  for (const e of Computers) {
    try {
      const data = await Details(e, data.region, data.apitoken);
      if (data) {
        setContent2((array) => [...array, data[0]]);
      }
    } catch (error) {
      console.log(error);
    }
  }
}

原理说明 #

• 原代码用map遍历数组时，会同步触发所有Details调用，所有请求会并行发送，瞬间给后端造成大量请求压力，导致崩溃。
• 修改为for...of循环后，每次迭代都会通过await等待当前请求完成，再进入下一次循环，确保请求按顺序串行执行，避免后端过载。

注意事项 #

• RequestComputers现在是异步函数，若调用它时需要等待所有请求完成，需用await调用，例如：await RequestComputers(yourComputersArray)。
• Details函数无需修改，它本身已经是返回Promise的异步函数，适配await调用。

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