如何在 JavaScript 中使用 async/await 將基於回呼的函數轉換為基於 Promise 的函數？

使用 Async/Await 將回呼轉換為 Promise

在 JavaScript 中，回呼是處理非同步操作的常見方法。但是，使用回調可能會導致程式碼難以閱讀和維護。 Async/await 是一項較新的功能，它提供了一種更直接的方式來處理非同步程式碼。

async/await 的主要優點之一是能夠暫停函數的執行，直到承諾解決。這使您可以編寫更易於閱讀和維護的程式碼，尤其是在處理多個非同步操作時。

問題陳述

考慮以下檢索維度的函數使用回調從給定URL 獲取圖像：

<code class="javascript">function getImageData(url) {
  const img = new Image();
  img.addEventListener('load', function () {
    return { width: this.naturalWidth, height: this.naturalHeight };
  });
  img.src = url;
}</code>

但是，如果您需要立即檢索影像數據，此程式碼可能會出現問題。如果您像這樣呼叫 getImageData 函數：

<code class="javascript">ready() {
  console.log(getImageData(this.url));
}</code>

您將得到未定義，因為回呼執行時圖片尚未載入。

使用 Async/ Await

要解決這個問題，可以使用 async/await 將 getImageData 函數轉換為 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 gracefully
    img.src = url;
  });
}

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>

在這段重寫的程式碼中，我們先建立一個傳回 Promise 的 loadImage 函數。當映像完成載入時，此 Promise 將解析；如果發生錯誤，則將拒絕。

接下來，我們建立一個 getImageData 函數，該函數使用 async/await 等待 loadImage 傳回的 Promise 在傳回圖片尺寸之前解析。

最後，我們可以使用 async/await 從 Ready 函數呼叫 getImageData 函數。這確保了ready函數只在圖像載入後記錄圖像尺寸。

透過使用async/await，您可以簡化涉及非同步操作的程式碼，並使其更易於閱讀和維護。

以上是如何在 JavaScript 中使用 async/await 將基於回呼的函數轉換為基於 Promise 的函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！