首頁 > web前端 > js教程 > 了解 JavaScript 非同步程式設計:回呼、Promise 和 Async/Await

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

Linda Hamilton
發布: 2025-01-04 21:20:39
原創
844 人瀏覽過

Understanding JavaScript Asynchronous Programming: Callbacks, Promises, and 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板