Question

我正在尝试检索所有URL的图像，并在所有图像均已加载（formatImages）后运行一个函数。为此，我做出了一个承诺，即监视图像加载过程并在完成后解决。为了确保所有图像都已加载，我然后在创建的promise列表上运行promise.all，以检查它们是否都已解决。问题在于，这似乎两次解决了诺言，导致出现了重复的图像。我希望它能在诺言解决和诺言的地方起作用。如果这是promise.all的正确功能。如何在不运行承诺的情况下将承诺添加到列表中。

我试图重写Promise，以便.then和.catch在images函数中。这什么也没做，导致从promise.all返回的值不确定？

let promiseList = []
let loadedImages = 0;

let image = function(i) {
    return new Promise(function(resolve, reject) {
        let img = new Image();
        img.src = `https://source.unsplash.com/random?${imageTopic}/sig${i}`;
        img.addEventListener('load', () => resolve(img));
        img.addEventListener('error', () => {
            reject(new Error(`Failed to load image's URL: ${url}`));
        });
    });
}

for (let i = 0; i < numImages; i++) {
    promiseList.push(image(i))
    promiseList[i].then(img => {
        mosaic.appendChild(img);
    }).catch(error => {
        console.error(error)
    });
}

Promise.all(promiseList).then((values) => {
    images = document.querySelectorAll(".mosaic img");
    formatImages();
    console.log(values)
});

预期结果：promise解析一次，promise.then.all是当promiseList中的所有promise都解析后运行的内容。

实际结果：promise解析了两次，还存在其他问题，例如return promise.All都未定义。

为什么这个诺言要解决两次，一次是正常解决，一次是使用promise.all？

0 个答案: