Javascript 等待所有元素完全符合承诺。所有

我一直在试图用一个相当简单的例子来说明承诺是如何工作的：一个获取大量图像，按顺序加载到页面上，计算加载的图像数量的例子

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 renders添加新的img。当我尝试从一系列URL添加图像时，我注意到了一些需要解决的问题：

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

---

我的第一个想法是：如果我解构addImg函数，让它将每个步骤作为一个单独的承诺执行，fetch all->然后validate all->然后。。。因此，它可能按照我的预期工作，但我不确定这是否是正确的方法。

如果您使用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');
}

---

这样，代码将等待每次图像加载完成，然后再进行下一次加载。请注意，这不是很好的性能，但是如果您希望按照特定顺序加载它们，那么这是一个您可以轻松实现的方法。

是的，这将是正确的方法。为什么要使用fetch、validateResponse和readResponseAsBlob，而不是简单地将一个附加到DOM？这样一来，它从一开始就处于正确的位置well@Bengi我正在尝试从中获取，每次访问它时，它都会生成不同的图像。我正在尝试将图像保存为一个blob，以便为img的srcAh创建一个url，好的。当然，你可以直接从https://picsum.photos/400/300/?image=+数学。floorMath。随机*1085：-