如何使用 async/await 将图像加载回调转换为 Promise？

使用 async/await 将回调转换为 Promise

回调提供了一种处理异步代码的便捷方法。然而，将 Promise 与 async/await 一起使用可以在代码可读性和可维护性方面提供优势。这个问题解决了将加载图像宽度和高度的回调函数转换为基于承诺的实现的挑战。

问题和解决方案

提供的回调函数 getImageData 返回自然宽度以及完成加载时图像的高度。然而，当异步调用时，如示例所示：

ready () {
  console.log(getImageData(this.url))
}

返回的值是未定义的，因为回调是立即执行的，而图像需要一些时间来加载。为了克服这个问题，我们可以使用 Promise 构造函数来创建一个在图像加载后解析的 Promise。这是更新后的 getImageData 函数作为 Promise：

function getImageData(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => {
      resolve({ width: img.naturalWidth, height: img.naturalHeight });
    });
    img.addEventListener('error', reject); // Handle errors here
    img.src = url;
  });
}

有了这个基于 Promise 的函数，我们现在可以使用 async/await 来延迟 getImageData 的执行并获取加载图像的实际宽度和高度：

async function ready() {
  const imageData = await getImageData(this.url);
  console.log(imageData);
}

此代码确保控制台日志记录仅在图像完全加载且其宽度和高度可用后发生。

以上是如何使用 async/await 将图像加载回调转换为 Promise？的详细内容。更多信息请关注PHP中文网其他相关文章！