Обещание. Все для списка изображений

Question

У меня есть следующий код, который выбирает из списка URL-адресов в imagesList, а затем добавляет изображения в поле Dropzone. Моя проблема в том, что изображения появляются в произвольном порядке в поле Dropzone, а НЕ в порядке в imagesList.

Я знаю, может быть, это можно исправить, если бы я использовал Promise.All, но я не уверен, как кодировать следующее в Promise.All. Я долго пробовал, но все не получалось.

Пожалуйста, помогите.

  var imagesList = ["/img1.jpg", "/img2.jpg", "/img3.jpg"];

  for (var i = 0; i < imagesList.length; i++) {
              let name = imagesList[i];
              name = name.substring(name.lastIndexOf('/') + 1);

              fetch(imagesList[i])
                    .then(res => res.blob())
                    .then(blob => {
                    let file = new File([blob], name, blob);
                    myDropzone1.addFile(file);
              });
   }

Answer 1

Вот пример того, как вы могли бы это сделать.

Как правило, для каждого URL в imagesList вы создаете Promise. Вы помещаете все эти обещания в Promise.all, который будет возвращать другое обещание, когда все изображения загружены, и он будет повторяться в порядке передачи.

var imagesList = ["/img1.jpg", "/img2.jpg", "/img3.jpg"];
Promise.all(imagesList.map(url => {
          const name = url.substring(name.lastIndexOf('/') + 1);
          return fetch(url)
                .then(res => res.blob())
                .then(blob => new File([blob], name, blob)
          });
})).then(results => results.forEach(file => myDropzone1.addFile(file)));

Пожалуйста, ознакомьтесь с документацией Promise.all и не стесняйтесь задавать вопросы, если вам нужны пояснения.

Надеюсь, это поможет;)

Answer 2

Надеюсь, это поможет.

function getFile(item) {
  return new Promise((resolve, reject) =>{
    let name = item.substring(item.lastIndexOf('/') + 1);

    fetch(item)
    .then(res => res.blob())
    .then(blob => {
      let file = new File([blob], name, blob);
      resolve(file);
    });
  })
}

let imagesList = ["/img1.jpg", "/img2.jpg", "/img3.jpg"];
let promises = imagesList.map(item => getFile(item));

Promise
.all(promises)
.then(files => {
  files.forEach(file => myDropzone1.addFile(file));
})