Ожидание всех элементов полностью с Promise.all

Question

Я пытался выяснить, как Promises работает на довольно простом примере: тот, который выбирает несколько изображений, загружает их на страницу по порядку, подсчитывает количество загруженных изображений.

const addImg = url => {
    fetch(url)
        .then(validateResponse)
        .then(readResponseAsBlob)
        .then(showImage)
        .catch(Error);
}

function showImage(responseAsBlob) {
    const container = document.getElementById('img-container');
    const imgElem = document.createElement('img');
    container.appendChild(imgElem);
    const imgUrl = URL.createObjectURL(responseAsBlob);
    imgElem.src = imgUrl;
    return imgUrl;
}

document.getElementById("add").onclick = () => {
    document.getElementById("status").innerHTML = "Fetching...";
    Promise.all(urls.map(url => addImg(url)))
        .then(setTimeout(() => {
            document.getElementById("status").innerHTML = document.getElementsByTagName("img").length + " images";
        }, 0));
}

Функция addImg извлекает изображение из URL, обрабатывает его как BLOB-объект, а showImage отображает добавляет новый img.Когда я пытаюсь добавить изображения из массива URL-адресов, я заметил несколько проблем, которые я хочу исправить:

1. Изображения не обязательно отображаются в порядке
2. imgколичество не является точным, это может сработать так, как я намереваюсь, но я не уверен, что это правильный подход.

Answer 1

Это может иметь больше смысла для вас, если вы переписали свой код с помощью async / await.Если вы переписали свой вызов AJAX как

const addImg = url => fetch(url)
      .then(validateResponse)
        .then(readResponseAsBlob)
        .then(showImage)
        .catch(Error);

И тогда вы могли бы сделать что-то вроде:

async function loadImages(){
  for(image in imageList){
    await addImg(image.url);
  }
  console.log('Images loaded');
}

Таким образом, ваш код будет ожидать завершения загрузки каждого изображения до следующего.Обратите внимание, что это не очень эффективно, но если вы хотите, чтобы они загружались по порядку, то это тот, который вы могли бы достичь легко.