等待所有元素完全使用 Promise.all答案

【问题标题】：Waiting for all elements to fully with Promise.all等待所有元素完全使用 Promise.all
【发布时间】：2018-09-27 09:30:32
【问题描述】：

我一直在尝试通过一个相当简单的示例来弄清楚 Promise 是如何工作的：获取许多图像，按顺序将其加载到页面上，然后计算加载的图像数量。

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 添加图像时，我注意到了一些我想要解决的问题：

图像不一定按顺序显示
img 计数不准确

我的第一个想法：如果我解构 addImg 函数，以便它作为单独的承诺执行每个步骤（获取所有 -> 然后验证所有 -> 然后......等等），它可能会按照我想要的方式工作，但我不确定这是否是正确的方法。

【问题讨论】：

是的，这是正确的方法。
为什么要使用fetch、validateResponse 和readResponseAsBlob，而不是简单地将<img> 附加到DOM？（这样一开始它也处于正确的位置）
@Bengi 我正在尝试从 picsum.photos/400/300/?random 获取，每次访问它都会生成不同的图像。我正在尝试将图像保存为 blob 以为 img 的 src 创建一个 url
啊，好的。当然你可以从"https://picsum.photos/400/300/?image="+Math.floor(Math.random()*1085) 获取 :-)

标签： javascript es6-promise

【解决方案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');
}

这样，您的代码将等待每个图像加载完成，然后再进行下一个。请注意，这不是很高效，但如果您希望它们按顺序加载，那么您可以轻松实现这一目标。

【讨论】：