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