Promise.all 不会在 React 中加载图像以在 HTML 画布中使用

Question

我正在 React 的 HTML 画布中构建一个小游戏。为此，我需要在开始与画布 API 交互之前预加载所有图像。我正在使用Promise.all加载所有图像，如下所示：

import tile from '../assets/images/tile.png';
componentDidMount() {
this.load();
}
loadImages(images) {
return images.map(image => {
return new Promise(resolve => {
const image = new Image();
image.onload = () => {
this.loadedImages.tile = image; //this.loadedImages is an instance variable
resolve(image);
};
image.src = image;
});
});
}
load() {
Promise.all(this.loadImages([tile]))
.then(a => console.log(a))
.catch(e => console.log(e));
}

所有映像都存在于项目的源目录中。我不确定是否使用承诺来加载它们，因为它们不是从网络上获取的。无论如何，load方法中的Promise.all不会解析所有承诺，因此它不会打印 thenables/catch 中的任何日志。但是，我可以像下面这样解决单个承诺：

loadImage($image) {
return new Promise(resolve => {
const image = new Image();
image.onload = () => {
this.loadedImages.tile = image;
resolve(image);
};
image.src = $image;
});
}
load() {
this.loadImage(tile)
.then(a => console.log(a)) //prints the image element - a
.catch(e => console.log(e));
}

请有人帮我解决这个问题。谢谢！

Answer 1

image.src = image;

这不行！而且由于你内心的承诺没有reject，你就不会听到这个错误。在单图像示例中，您使用$image来区分两个图像。

只需重命名两个image变量中的一个。

loadImages(images) {
return images.map(imageFile => {
return new Promise(resolve => {
const image = new Image();
image.onload = () => {
this.loadedImages.tile = image; //this.loadedImages is an instance variable
resolve(image);
};
image.src = imageFile;
});
});
}

Answer 2

您没有reject()函数。您应该有一个来调试此类错误。

此外，在同一作用域上使用两个同名(image(的不同变量。

您需要单个图像文件，因此您绝对不需要创建数组，更不用说创建 Promise 数组了。

最后，考虑使用 async/await 语法。它更清晰，更容易调试和理解，并且它的语法是 React 兼容的。