时间戳

首页 > 解决方案 > Promise.All 用于图像列表

javascript - Promise.All 用于图像列表

问题描述

我有以下代码，它从 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);
              });
   }

标签： javascriptpromise

解决方案

这是您如何做到这一点的示例。

基本上，对于 中的每个 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 的文档，如果您需要一些说明，请随时提出问题。

希望它会有所帮助；）

推荐阅读