按顺序加载 API 请求 (JavaScript)

Question

我正在编写的脚本在 for 循环中进行了几次 API 调用。问题在于，某些 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 调用完成之前不加载第二个 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