Question

我有以下代码，该代码从imagesList中的URL列表中获取，然后将图像添加到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

以下是您如何操作的示例。

基本上，对于imagesList中的每个URL，您都会产生一个Promise。您将所有这些promise放在Promise.all中，当所有图像加载完毕时，它们将返回另一个promise，并且将按照传入的顺序进行迭代。

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

请检查the documentation of 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));
})

Promise.All提供图像列表

2 个答案: