異步 JavaScript：從回調到 Promise 和 Async/Await

介紹

JavaScript 是一種強大的單線程編程語言，廣泛用于 Web 開發(fā)。 JavaScript 中的一個常見挑戰(zhàn)是處理異步任務，例如從 API 獲取數據或執(zhí)行時間敏感的操作，而不阻塞主線程。隨著時間的推移，開發(fā)人員已經從使用回調轉向使用 Promise，現在使用更優(yōu)雅的 async/await 語法來管理異步操作。本指南將引導您逐步了解這些概念，從基礎知識開始直至高級場景。到最后，您將能夠在現實應用程序中自信地使用異步 JavaScript。

---

什么是異步編程？

在 JavaScript 中，從服務器獲取數據、讀取文件或設置超時等任務可能需要時間才能完成。 JavaScript 允許這些任務異步運行，而不是等待這些任務完成（這會阻止程序其余部分的執(zhí)行）。這意味著它們的處理獨立于主程序流程，允許其他代碼立即執(zhí)行。

---

了解回調：起點

什么是回調？

回調是作為參數傳遞給另一個函數的函數。當第一個函數完成其操作時，它會執(zhí)行回調函數以表示完成。

回調示例：了解基礎知識

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

說明：

1. fetchData 模擬延遲獲取數據。
2. 延時后，執(zhí)行回調函數（processData），表示數據準備好了。

---

回調地獄：問題所在

使用嵌套回調處理多個異步任務很快就會導致代碼不可讀且難以維護。

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

這個“厄運金字塔”使得調試和維護代碼變得困難。

---

承諾：更好的選擇

什么是承諾？

promise 是一個對象，表示現在、將來或永遠不可用的值。 Promise 具有三種狀態(tài)：

• 待處理：初始狀態(tài)，既不滿足也不拒絕。
• 已完成：操作成功完成。
• 已拒絕：操作失敗。

Promise 示例：重寫回調地獄

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

Promise 的好處

1. 通過鏈接提高了可讀性。
2. 使用 .catch() 進行內置錯誤處理。
3. 避免深層嵌套的回調。

---

異步/等待：現代優(yōu)雅

什么是異步/等待？

async/await 是承諾的語法糖，在 ES2017 中引入。它使異步代碼看起來是同步的，提高了可讀性和可維護性。

Async/Await 示例：簡化 Promise

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

它是如何運作的

1. async 關鍵字：將函數聲明為異步。
2. await 關鍵字：暫停函數執(zhí)行，直到 Promise 解決或拒絕。

異步/等待的好處

1. 順序、可讀的代碼。
2. 使用 try...catch 進行錯誤處理。
3. 降低回調復雜性。

---

使用 Async/Await 處理現實場景

并行執(zhí)行：Promise.all

當需要并行執(zhí)行多個獨立的異步任務時：

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

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Processing: ${data}`);
            resolve("Processed data");
        }, 1000);
    });
}

function saveData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Saving: ${data}`);
            resolve("Data saved");
        }, 1000);
    });
}

// Chaining Promises
fetchData()
    .then((data) => processData(data))
    .then((processedData) => saveData(processedData))
    .then((finalResult) => console.log(finalResult))
    .catch((error) => console.error("Error:", error));

錯誤處理：try...catch 與 .catch()

使用異步函數的 try...catch 正確管理錯誤：

async function handleData() {
    try {
        const fetchedData = await fetchData();
        const processedData = await processData(fetchedData);
        const savedData = await saveData(processedData);
        console.log(savedData);
    } catch (error) {
        console.error("Error:", error);
    }
}

handleData();

---

有關異步 JavaScript 的常見常見問題解答

如果我忘記等待會發(fā)生什么？

該函數返回一個承諾而不是解析值。這可能會導致意外行為。

async function fetchAllData() {
    const task1 = fetchData();
    const task2 = fetchData();
    const results = await Promise.all([task1, task2]);
    console.log("All data fetched:", results);
}
fetchAllData();

我可以在沒有 Promise 的情況下使用 Async/Await 嗎？

不，await 只能與 Promise 一起使用。然而，像 fetch 和 Node.js 的 fs.promises API 這樣的庫提供了基于原生 Promise 的方法。

我什么時候應該使用回調？

回調對于小型、簡單的任務或使用不支持 Promise 的舊 API 時仍然有用。

---

結論

掌握異步 JavaScript 對于任何使用現代 Web 應用程序的開發(fā)人員來說都是至關重要的。從回調開始，您可以了解 Promise 和 async/await 如何簡化異步代碼并提高可讀性。謹慎使用回調，利用 Promise 實現更好的錯誤處理，并擁抱 async/await 以獲得干凈、直觀的代碼。有了這些工具，您就可以準備好應對項目中的任何異步挑戰(zhàn)。

以上是掌握異步 JavaScript：回調、Promise 和簡化的 Async/Await的詳細內容。更多信息請關注PHP中文網其他相關文章！