在 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中文網其他相關文章！
