javascript - 如何在javascript中修复无序的“获取”

Question

我正在使用 for 循环获取多条路线并保存其结果这是我的代码

 for (let i = 0; i < datesToFetch.length; i++) {


fetch("http://localhost:3000/areaChart/"+datesToFetch[i]+"/"+datesToFetch[i+1])
.then(response => response.json())
.then(response => console.log(response))

}

真的很奇怪，我得到的数据顺序是随机顺序，它不是根据 for 循环升序顺序来的，这在这种情况下非常重要

我应该怎么做才能以正确的顺序获取数据？

标签： javascriptfor-loopecmascript-6fetch

Answer 1

发生了什么，以及如何解决它：

您的代码正在排队一堆fetches，但在继续循环的下一次迭代之前没有等待它们完成。他们可以按任何顺序完成。

相反，如果您希望循环每次都停止并等待，请将其包装在一个async函数中，然后await获取。

async function test() {

    for (let i = 0; i < datesToFetch.length; i++) {
        var response = await fetch("http://localhost:3000/areaChart/"+datesToFetch[i]+"/"+datesToFetch[i+1]);
        var responseJson = await response.json();
        console.log(responseJson);
    }

}

---

模拟您的代码：

const delay = t => new Promise(resolve => setTimeout(resolve, t));

async function test() {
  for (let i = 1; i <= 5; i++) {
    console.log(`Starting call #${i}`);
    delay(5000 - (i * 1000))
      .then(() => console.log(`Call #${i} has completed.`));
  }
}

test();

上面提供的解决方案的模拟：

const delay = t => new Promise(resolve => setTimeout(resolve, t));

async function test() {
  for (let i = 1; i <= 5; i++) {
    console.log(`Starting call #${i}`);
    await delay(5000 - (i * 1000));
    console.log(`Call #${i} has completed.`);
  }
}

test();