在forEach循环中同步运行异步JavaScript函数[重复]答案

【问题标题】：Run asynchronous JavaScript functions inside a forEach loop synchronously [duplicate]在forEach循环中同步运行异步JavaScript函数[重复]
【发布时间】：2020-07-26 23:26:31
【问题描述】：

我正在开发一个应用程序，但遇到了问题。我想在 forEach 循环中运行两个函数，这意味着每次迭代都运行两个函数一次。

这很简单，但我的函数是异步的，我的第一个函数需要在第二个函数执行之前完成。

我使这些函数异步的原因是在我的应用程序中这些函数代表一个 API 调用。

我将向您展示一个使用 setTimeout() 而不是 API 调用的快速示例。

async function f(){
  await setTimeout(()=>{
    console.log("FIRST")
  },1000)
}

async function f2(){
  await setTimeout(()=>{
    console.log("SECOND")
  },3000)
}

for(var i = 0;i < 5; i++){
  f() 
  f2()
}

当我运行它时，输出是：

FIRST
FIRST
FIRST
FIRST
FIRST
SECOND
SECOND
SECOND
SECOND
SECOND

我需要我的输出是：

FIRST
SECOND
FIRST
SECOND
FIRST
SECOND
FIRST
SECOND
FIRST
SECOND

知道如何实现这一目标吗？会很有帮助的。

【问题讨论】：

它们不能同步运行，但你可以让它们按顺序运行。它们是有区别的。要按顺序执行它们，只需执行f().then(f2)。但是，如果您希望它们成对运行，则它们将成对运行 f -> f2 -> f -> f2 you can also do tha
我尝试了 reduce 方法，但没有成功。发生的情况是第一个函数执行了 5 次（因为我将循环迭代了 5 次），然后第二个函数执行了 5 次，这不是预期的结果。
嗯，你需要为两个功能正确设置链。这个想法是链接以下操作：f().then(f2).f().then(f2).f().then(f2).f().then(f2).f().then(f2) - 它是f，后跟f2 5 次。由于我不知道真正的源代码，并且我认为这是一种简化，因此我不能真正说出.reduce 这些的最佳方式。但是你可以用循环 p = Promise.resolve(); for() { p = p.then(f).then(f2) } 做同样的事情，它会产生类似的效果。
没什么特别的，结果还是一样的。第一个函数执行 5 次，然后第二个函数执行 5 次。
那我不知道该说什么了——这就是你按顺序链接承诺的方式。如果它不起作用，那么您一定没有正确解决的承诺。

标签： javascript reactjs asynchronous foreach async-await

【解决方案1】：

等待第一个异步函数完成，然后调用第二个

for(var i = 0;i < 5; i++){
  f1().then(res => {
   return f2()
  }
}

这不能保证您想要的输出，但可以保证在调用 f1 之后调用 f2

注意：您可以将所有承诺收集到一个数组中，如果您想知道所有承诺何时完成，可以调用Promise.all。

【讨论】：

我之前试过这个，结果一样，没用。