Загрузка запросов API по порядку (JavaScript)

Question

Скрипт, который я пишу, выполняет несколько вызовов API в цикле for.Проблема в том, что некоторые вызовы API загружаются дольше, чем другие, поэтому информация загружается на странице не по порядку.

Например, я сделаю вызов API для объектов 1-8, но они 'Загрузим в следующем порядке: 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 приводят к тому, что скрипт ожидает отображения данных, пока ВСЕ они не будут загружены.Это нежелательный результат, поскольку, если данных достаточно, пользователю, возможно, придется подождать несколько секунд, чтобы что-то увидеть.

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 возвращает Обещание, которое затем вы можете 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;
  }
}

Чтобы выжать всю полосу пропускания из вашего соединения, вы можете выполнить запросы впараллельно, а затем показать все деления одновременно:

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;
  }
}

Читать дальше