Применить async / await к вызовам fetch-then - PullRequest
Новая
       16

Применить async / await к вызовам fetch-then

0 голосов
/ 07 марта 2019

У меня есть следующий код, который читает из массива URL-адресов изображений в imagesList, затем выбирает из этих изображений и добавляет их в поле myDropzone1.Проблема в том, что изображения добавляются, я думаю, в том порядке, в котором они были извлечены, а не в том порядке, в котором они перечислены в массиве.

Возможное решение, о котором я могу подумать, - это использовать async / await,но я не уверен, как применить это к этому фрагменту кода.Пожалуйста, помогите. 

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

Спасибо.

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Полагаю, вы могли бы сделать это: 

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

        let res = await fetch(imagesList[i]),
            blob = res.blob(),
            file = new File([blob], name, blob);

        myDropzone1.addFile(file);
    }
}

fetchImages();
0 голосов
/ 07 марта 2019

Вы все делаете правильно, и вам не нужно async/await, чтобы это исправить. Вам просто нужно убедиться, что вы не инициируете следующий вызов, если у вас нет ответа на предыдущий вызов.

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

function fetchRecursively(imagesList, myDropzone1) {
  // execute only if there imageList has some value,
  if (imagesList.length) {
    let name = imagesList[0];
    name = name.substring(name.lastIndexOf('/') + 1);
    fetch(imagesList[0])
      .then(res => res.blob())
      .then(blob => {
        let file = new File([blob], name, blob);
        myDropzone1.addFile(file);

        // after a call has completed, shift the array and make next call.
        imagesList.shift();
        fetchRecursively(imagesList, myDropzone1);
     });
  }
  return;
}

Кроме того, вы можете использовать Promise.all, чтобы дождаться завершения всех вызовов извлечения и затем выполнить ваш код [последовательно].

...