我们如何使用 Async/Await 从基于回调的函数安全地检索图像尺寸？

使用 Async/Await 从回调创建 Promise

提供的函数 getImageData 在加载时利用回调来检索图像尺寸。然而，如果图像在访问其属性之前未完全加载，JavaScript 的同步特性可能会导致未定义的值。

为了解决这个问题，我们可以利用 Promise 和 async/await 来保证宽度和宽度的可用性。

将回调转换为 Promise

第一步是将 getImageData 函数转换为 Promise。这可以使用 Promise 构造函数来实现：

<code class="javascript">function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', reject); // Handle errors
    img.src = url;
  });
}</code>

利用 Async/Await

使用 loadImage 函数作为 Promise，我们可以使用 async/await 来确保图像在访问其尺寸之前加载：

<code class="javascript">async function getImageData(url) {
  const img = await loadImage(url);
  return { width: img.naturalWidth, height: img.naturalHeight };
}
async function ready() {
  console.log(await getImageData(this.url))
}</code>

此版本返回一个承诺，仅当图像完成加载时才使用图像尺寸进行解析。 Ready 函数现在可以记录这些维度，而不会遇到未定义的值。

以上是我们如何使用 Async/Await 从基于回调的函数安全地检索图像尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！