在继续之前等待循环完成

Question

我目前有一个非常简单的 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!');

Answer 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!'));