按顺序加载 API 个请求 (JavaScript)

Question

我正在编写的脚本在 for 循环中进行了几次 API 调用。问题是某些 API 调用比其他调用需要更长的时间来加载，因此页面上的信息加载顺序不正确。

例如，我将对对象 1-8 进行 API 调用，但它们将按以下顺序加载：4、3、1、2、7、5、6、8

代码基本如下：

function loadData() {
    for (var i = 0; i < 8; i++) {
        $.getJSON("http://theapi.com/data" + i, function(data) {
            var div = "<div>" + data + "</div>";
            browserElement.innerHTML += div;
        });
    }
}

如何强制 JavaScript 在第一个调用完成之前不加载第二个 API 调用？

编辑： 使用 "promises" 链接 API 调用导致脚本等待显示数据，直到加载所有数据。这不是一个理想的结果，因为如果有足够的数据，用户可能需要等待几秒钟才能看到任何东西。

Answer 1

在循环中创建所有 div，然后在数据可用时填充数据

function loadData() {
    for (var i = 0; i < 8; i++) {
        let div = document.createElement("div");
        browserElement.innerHTML += div;

        $.getJSON("http://theapi.com/data" + i, function(data) {
            div.innerHTML = data;
        });
    }
}

Answer 2

$.getJSON returns 一个 Promise，然后您可以 await 停止执行并获得结果：

async function loadData() {
  for (let i = 0; i < 8; i++) {
    const data = await $.getJSON("http://theapi.com/data" + i);
    const div = "<div>" + data + "</div>";
    browserElement.innerHTML += div;
  }
}

要从您的连接中挤出全部带宽，您可以运行并行请求，然后一次显示所有 div：

async function loadData() {
  const promises = [];
  for (let i = 0; i < 8; i++) {
    promises.push($.getJSON("http://theapi.com/data" + i));

  const result = await Promise.all(promises);

  for(const data of result) {
    const div = "<div>" + data + "</div>";
    browserElement.innerHTML += div;
  }
}

Read on

按顺序加载 API 个请求 (JavaScript)

Loading API requests in order (JavaScript)

javascript

getjson