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

时间:2019-04-21 02:55:22

标签: javascript ecmascript-6 es6-promise

我正在尝试检索所有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都未定义。

0 个答案:

没有答案