JavaScript 中的非同步程式設計：回呼、Promise、Async/Await

非同步程式設計是 JavaScript 的關鍵方面，它允許開發人員在不阻塞主執行緒的情況下執行長時間的網路請求、檔案操作和其他耗時的任務。這可確保應用程式保持響應靈敏且用戶友好。 JavaScript 提供了三種主要方式來處理非同步操作：回呼、Promises 和 Async/Await。在本文中，我們將深入研究這些方法，透過詳細的範例探索它們的語法、用法和差異。

目錄

1. 非同步程式設計簡介
2. 回調
   • 語法和範例
   • 優點和缺點
3. 承諾
   • 語法和範例
   • 連鎖承諾
   • 優點和缺點
4. 異步/等待
   • 語法和範例
   • 錯誤處理
   • 優點和缺點
5. 比較與最佳實務
6. 結論

非同步程式設計簡介

在 JavaScript 中，需要時間才能完成的操作，例如從伺服器取得資料、讀取檔案或執行計算，可以非同步處理。這意味著在等待操作完成時，JavaScript 引擎可以繼續執行其他任務。這對於在 Web 應用程式中創建高效、流暢的用戶體驗至關重要。

回調

語法和範例

回呼是 JavaScript 中最早處理非同步操作的方法之一。回調只是一個作為參數傳遞給另一個函數的函數，該函數將在非同步操作完成後執行。

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched!");
    }, 1000);
}

function displayData(data) {
    console.log(data);
}

fetchData(displayData);

在上面的範例中，fetchData 使用 setTimeout 模擬非同步操作。 1 秒鐘後，它會呼叫 displayData 函數，將獲取的資料作為參數傳遞。

優點和缺點

優點：

• 簡單明了的小任務。
• 提供了一種在非同步操作完成後執行程式碼的方法。

缺點：

• 嵌套多個非同步操作時會導致“回調地獄”，使程式碼難以閱讀和維護。
• 錯誤處理很麻煩，因為需要在每個回呼中管理錯誤。

承諾

語法和範例

ES6 (ECMAScript 2015) 中引入了 Promise 來解決與回呼相關的問題。 Promise 代表尚未完成但預計未來完成的操作。它可以處於三種狀態之一：待處理、已完成或已拒絕。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("Error:", error);
    });

在此範例中，fetchData 傳回一個 Promise，該 Promise 解析為「Data fetched!」 1秒後。 then 方法用於處理解析後的值，catch 用於處理任何錯誤。

連結承諾

Promise 可以連結起來依序執行一系列非同步操作。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`${data} Processed!`);
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
        return processData(data);
    })
    .then(processedData => {
        console.log(processedData);
    })
    .catch(error => {
        console.error("Error:", error);
    });

在此範例中，processData 在 fetchData 之後調用，並使用 then 依序處理結果。

優點和缺點

優點：

• 透過允許非同步操作連結來避免回調地獄。
• 透過 catch 提供內建錯誤處理。
• 提高程式碼可讀性和可維護性。

缺點：

• 透過多個巢狀的 then 呼叫仍然會變得複雜。
• 鏈中的錯誤處理可能非常重要。

異步/等待

語法和範例

ES2017 中引入的 Async/Await 提供了一種更易讀、更簡潔的方式來使用 Promises 編寫非同步程式碼。 async 關鍵字用於定義非同步函數，await 關鍵字用於暫停執行，直到 Promise 解決。

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

async function displayData() {
    const data = await fetchData();
    console.log(data);
}

displayData();

在此範例中，displayData 是一個非同步函數，它在記錄資料之前等待 fetchData 完成。

錯誤處理

可以使用 try/catch 區塊來完成非同步/等待的錯誤處理。

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Failed to fetch data!");
        }, 1000);
    });
}

async function displayData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error("Error:", error);
    }
}

displayData();

這裡，如果 fetchData 失敗，錯誤將被 catch 區塊捕獲並記錄。

優點和缺點

優點：

• 簡化非同步程式碼，使其看起來更像同步程式碼。
• 增強程式碼可讀性和可維護性。
• 使用 try/catch 區塊簡化錯誤處理。

缺點：

• 需要了解 Promise，因為 Async/Await 是建立在 Promise 之上的。
• 仍然相對較新，因此某些環境可能不完全支援它。

比較和最佳實踐

比較

• 回調：適合簡單的單級非同步任務，但在複雜場景下可能會導致回調地獄。
• Promises：提高可讀性和可管理性，允許非同步操作的連結。使用 catch 內建錯誤處理。
• Async/Await：提供最具可讀性和可維護性的非同步程式碼編寫方式。簡化了錯誤處理，看起來像同步程式碼。

最佳實踐

• 對於大多數需要處理非同步操作的場景，請使用 Async/Await。它提供了最佳的可讀性和簡單性。
• 當您需要依序執行多個非同步操作或使用傳回 Promises 的函式庫時，請使用 Promises。
• 避免回呼除非使用遺留程式碼或處理非常簡單的非同步任務。

結論

JavaScript 中的非同步程式設計對於建立響應迅速且高效的應用程式至關重要。了解回調、Promises 和 Async/Await 之間的差異使開發人員能夠為其特定用例選擇正確的工具。雖然回調是處理非同步操作的最簡單形式，但它們可能會導致程式碼混亂。 Promise 提供了一種更結構化的方法，但 Async/Await 提供了最優雅和可讀的解決方案。透過遵循最佳實務並了解這些工具，開發人員可以編寫乾淨、可維護且高效的非同步程式碼。

以上是JavaScript 中的非同步程式設計：回呼、Promise、Async/Await的詳細內容。更多資訊請關注PHP中文網其他相關文章！