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