按顺序加载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;
        });
    }
}

在第一个API调用完成之前，如何强制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返回一个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