等待 for 循环完成后再继续答案

【问题标题】：Wait for for loop to complete before continuing等待 for 循环完成后再继续
【发布时间】：2021-12-27 04:17:26
【问题描述】：

我目前正在运行一个非常简单的 for 循环，但它正在从数据库中获取详细信息，因此会产生一些延迟。这是一个非常基本的脚本，因此不涉及其他问题中显示的大量额外代码。

var animals = ['dog', 'cat', 'fish', 'squirrel'];
for (var x in animals) {
  console.log('Animal ' + (Number(x) + 1) + ' is a ' + animals[x]);
}
console.log('loop is finished!');

当然，如果你经常运行这个，你会得到预期的日志，

"Animal 1 is a dog"
"Animal 2 is a cat"
"Animal 3 is a fish"
"Animal 4 is a squirrel"
"loop is finished!"

但是，由于从服务器访问阵列有一些延迟，我得到：

"loop is finished!"
"Animal 1 is a dog"
"Animal 2 is a cat"
"Animal 3 is a fish"
"Animal 4 is a squirrel"

在进入代码中的下一个任务之前，如何确保整个循环完成？

我想要“循环结束！”显示网络活动是什么，或者在 for 循环中可能放置什么延迟。

这是“原始代码”：

fetch('http://localhost:3000/pet/'+pet)
  .then(res => res.json())
  .then(data => {
    const newData = (data);
    for (var x in newData) {
      finalpetName.push(newData[x].petName);
      console.log('pet' + x + 'is retrieved');
    };
  })
  .catch(err => {
    console.error(err)
  });
console.log('loop is finished!');

【问题讨论】：

我在您的示例中没有看到任何异步代码？如果您需要等待异步函数完成以执行代码，则需要使用 await 关键字。
我整个晚上都在尝试在 promise 和 await 和 async 等上使用大量不同的变体，但似乎没有任何效果。我只是想要一个使用上面非常基本的代码的超级超级基本示例。这里的所有其他问题都包含来自用户原始代码的太多附加信息。我想我会问一个很好的简单动物数组示例来学习该过程，然后我可以将其用于我自己的工作，而不是粘贴我的代码并要求修复。
您问题中的代码不会也不会产生您描述的问题。如需有用的回复，请显示您的实际代码。
这很重要。您共享的代码中没有任何异步内容。当代码同步时，具有延迟的后端没有任何意义。所以是的，如果它是异步的，真正的代码会有所不同。你说“除了数组在数据库上”那么数据库调用在哪里？？？那是缺少的异步部分导致您出现问题。
不，当您不提供可以重现问题的实际代码时，会更加混乱。您的示例代码没有任何问题。如果你给出了代码，你会在一个多小时前从这条评论中得到答案。

标签： javascript asynchronous

【解决方案1】：

fetch 是异步的。您的 fetch 块之后的任何内容不取决于那里发生的事情来完成。

你有几个选择。

选项 1： 移动 console.log('loop is finished!'); 以在第二个 then 方法中回调。

fetch('http://localhost:3000/pet/'+pet)
  .then(res => res.json())
  .then(data => {
    const newData = (data);
    for (var x in newData) {
      finalpetName.push(newData[x].petName);
      console.log('pet' + x + 'is retrieved');
    };
    console.log('loop is finished!');
  })
  .catch(err => {
    console.error(err)
  });

选项 2：如果您希望它在所有异步工作完成后执行，包括处理任何错误，请使用 finally

fetch('http://localhost:3000/pet/'+pet)
  .then(res => res.json())
  .then(data => {
    const newData = (data);
    for (var x in newData) {
      finalpetName.push(newData[x].petName);
      console.log('pet' + x + 'is retrieved');
    };
  })
  .catch(err => {
    console.error(err)
  })
  .finally(() => console.log('loop is finished!'));

【讨论】：