Promise.all 没有在 React 中加载图像以在 HTML Canvas 中使用答案

【问题标题】：Promise.all Not Loading Images in React For Use In HTML CanvasPromise.all 没有在 React 中加载图像以在 HTML Canvas 中使用
【发布时间】：2020-05-05 05:24:56
【问题描述】：

我正在用 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));
 }

所有图像都存在于项目的源目录中。我不确定是否使用 Promises 来加载它们，因为它们不是从 web 获取的。无论如何，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));
 }

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

【问题讨论】：

我怀疑您在加载其中一张图像时出错，但由于您在迭代中创建的承诺没有实现拒绝，因此它会静默失败。我会在承诺中添加一个拒绝，看看这是否会告诉你更多信息。
对，但是单一的承诺解决方案有效，所以我认为它不会拒绝。 @ChristianFritz
@ChristianFritz 是否承诺从相对路径加载图像的可接受方式？
我想是的，是的。加载文件和管理异步性（承诺或回调）是两个完全不同的任务。它们非常独立。

标签： html reactjs promise html5-canvas

【解决方案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;
    });
  });
}

【讨论】：

【解决方案2】：

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

此外，您在同一范围内使用了两个具有相同名称 (image) 的不同变量。

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

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

【讨论】：