javascript - 使用 async/await 而不是 Promise 来处理在 Javascript 中加载图像

Question

这个问题已经有答案了:

How to turn this callback into a promise using async/await? (2 个回答)

已关闭 3 年前。

我编写了一个基于 promise 的加载图像函数。

function loadImage() {
    const img = new Image();


    return new Promise((resolve, reject) => {
      img.addEventListener("load", () => {
        resolve();
      });

      img.addEventListener("error", () => {
        reject();
      });

      img.src = 'assets/myImg.jpg';
    });
}

loadImage.then(
  () => console.log('image loaded'),
  () => console.error('image did not load')
);

我想使用 async/await 对其进行转换但我实际上正在努力做到这一点。知道如何实现吗？

Answer 1

您可以等待您的loadImage函数，但是 new Image()对象不使用 promise ，它使用您用 Promise 包装的事件。

async 内部功能，您可以await你的loadImage函数，如下所示:

async function loadImage() {
    const img = new Image();

    return new Promise((resolve, reject) => {
      img.addEventListener("load", () => {
        resolve();
      });

      img.addEventListener("error", () => {
        reject();
      });

      img.src = 'assets/myImg.jpg';
    });
}

async function doSomething() {
  try {
    await loadImage();
    console.log("image loaded");
  } catch(e) {
    console.error("image did not load");
  }
}