我們如何使用 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中文網其他相關文章！