了解 JavaScript 非同步程式設計：回呼、Promise 和 Async/Await

JavaScript 的非同步特性對於創建用戶友好、響應迅速且高效的應用程式至關重要。了解非同步程式設計的基本想法（例如回調、promise 和 async/await）對於成功導航至關重要。本手冊將剖析這些想法並研究它們的應用、優點和缺點。

---

非同步與同步編程

同步程式設計:

• 在同步編程中，任務是依序執行的。程式會等待任務完成，然後再繼續下一個任務。
• 這種方法可能會導致效率低下，尤其是在網路請求或文件處理等耗時的操作期間。

同步程式碼範例:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

非同步程式設計:

• 非同步程式設計允許任務獨立運行，使程式能夠在等待某些任務完成的同時繼續執行其他操作。
• 這對於從伺服器取得資料等任務特別有用，否則等待可能會凍結使用者介面。

---

為什麼我們需要非同步程式設計？

1. 反應能力：防止 UI 在長時間操作期間變得無回應。
2. 效率：允許同時執行多個操作，最佳化資源使用。
3. 使用者體驗：透過確保流暢且不間斷的工作流程來增強互動。

---

回調

定義：回呼是作為參數傳遞給另一個函數的函數，在任務完成後執行。

範例：

function fetchData(callback) {
    console.log("Fetching data...");
    setTimeout(() => {
        const data = "Data received"; // Simulate fetched data
        callback(data); // Execute the callback with the data
    }, 2000);
}

fetchData((data) => {
    console.log(data); // Logs after data is fetched
});

說明：

• fetchData 函數使用 setTimeout 模擬延遲。
• 延遲結束後，將使用所取得的資料執行回呼。

回呼問題:

• 回調地獄：當多個非同步操作相互依賴時，深度嵌套的回調使程式碼難以閱讀和維護。

---

承諾

定義：Promise 是一個表示非同步操作最終完成（或失敗）及其結果值的物件。

好處：

• 簡化鍊式非同步操作。
• 與回呼相比，提供更好的錯誤處理。

範例：

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data...");
        setTimeout(() => {
            const data = "Data received";
            resolve(data); // Resolve the promise with data
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // Logs after promise is resolved
    })
    .catch(error => {
        console.error(error); // Handles errors
    });

說明：

• Promise 透過連結 .then() 來成功，連結 .catch() 來處理錯誤，從而提高可讀性。
• 它們消除了回調中典型的巢狀結構。

---

異步/等待

定義：Async/await 是建立在 Promise 之上的語法糖，使您能夠編寫看起來和行為更像同步程式碼的非同步程式碼。

好處：

• 提高程式碼可讀性和可維護性。
• 更直接地處理非同步邏輯。

範例：

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

說明：

• async 關鍵字表示函數包含非同步程式碼。
• await 關鍵字暫停執行，直到 Promise 解析，使程式碼看起來同步，同時保持非阻塞。

---

重點總結

1. 同步與非同步:

   • 同步程式碼會阻塞執行，直到任務完成。
   • 非同步程式碼允許其他任務同時執行。

2. 回呼:

   • 傳遞用於處理非同步結果的函數。
   • 容易陷入具有複雜依賴關係的回調地獄。

3. 承諾：

   • 回呼的更乾淨的替代方案，支援連結和錯誤處理。

4. 非同步/等待:

   • 使非同步程式碼更具可讀性和可維護性。

---

透過理解和利用這些策略，您可以開發出有效且易於使用的 JavaScript 應用程式。無論您是管理簡單的任務還是創建複雜的工作流程，學習非同步程式設計對於成為熟練的 JavaScript 開發人員至關重要。

追蹤我：Github Linkedin 線程

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