非同步 JavaScript：從回呼到 Promise 和 Async/Await

介紹

JavaScript 是一種強(qiáng)大的單執(zhí)行緒程式語(yǔ)言，廣泛用於 Web 開發(fā)。 JavaScript 中常見的挑戰(zhàn)是處理非同步任務(wù)，例如從 API 取得資料或執(zhí)行時(shí)間敏感的操作，而不阻塞主執(zhí)行緒。隨著時(shí)間的推移，開發(fā)人員已經(jīng)從使用回調(diào)轉(zhuǎn)向使用 Promise，現(xiàn)在使用更優(yōu)雅的 async/await 語(yǔ)法來(lái)管理非同步操作。本指南將引導(dǎo)您逐步了解這些概念，從基礎(chǔ)知識(shí)開始直到進(jìn)階場(chǎng)景。到最後，您將能夠在現(xiàn)實(shí)應(yīng)用程式中自信地使用非同步 JavaScript。

---

什麼是非同步程式設(shè)計(jì)？

在 JavaScript 中，從伺服器取得資料、讀取檔案或設(shè)定逾時(shí)等任務(wù)可能需要時(shí)間才能完成。 JavaScript 允許這些任務(wù)非同步運(yùn)行，而不是等待這些任務(wù)完成（這會(huì)阻止程式其餘部分的執(zhí)行）。這意味著它們的處理獨(dú)立於主程式流程，允許其他程式碼立即執(zhí)行。

---

了解回調(diào)：起點(diǎn)

什麼是回調(diào)？

回呼是作為參數(shù)傳遞給另一個(gè)函數(shù)的函數(shù)。當(dāng)?shù)谝粋€(gè)函數(shù)完成其操作時(shí)，它會(huì)執(zhí)行回調(diào)函數(shù)以表示完成。

回調(diào)範(fàn)例：了解基礎(chǔ)知識(shí)

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. 延時(shí)後，執(zhí)行回呼函數(shù)（processData），表示資料準(zhǔn)備好了。

---

回調(diào)地獄：?jiǎn)栴}所在

使用巢狀回呼處理多個(gè)非同步任務(wù)很快就會(huì)導(dǎo)致程式碼不可讀且難以維護(hù)。

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

這個(gè)「厄運(yùn)金字塔」使得調(diào)試和維護(hù)程式碼變得困難。

---

承諾：更好的選擇

什麼是承諾？

promise 是一個(gè)對(duì)象，表示現(xiàn)在、將來(lái)或永遠(yuǎn)無(wú)法使用的值。 Promise 有三種狀態(tài)：

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

Promise 例：重寫回調(diào)地獄

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. 透過連結(jié)提高了可讀性。
2. 使用 .catch() 進(jìn)行內(nèi)建錯(cuò)誤處理。
3. 避免深層嵌套的回呼。

---

非同步/等待：現(xiàn)代優(yōu)雅

什麼是異步/等待？

async/await 是承諾的語(yǔ)法糖，在 ES2017 中引入。它使非同步程式碼看起來(lái)是同步的，提高了可讀性和可維護(hù)性。

Async/Await 範(fàn)例：簡(jiǎn)化 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);

它是如何運(yùn)作的

1. async 關(guān)鍵字：將函數(shù)宣告為非同步。
2. await 關(guān)鍵字：暫停函數(shù)執(zhí)行，直到 Promise 解決或拒絕。

非同步/等待的好處

1. 順序、可讀的程式碼。
2. 使用 try...catch 進(jìn)行錯(cuò)誤處理。
3. 降低迴調(diào)複雜性。

---

使用 Async/Await 處理現(xiàn)實(shí)場(chǎng)景

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

當(dāng)需要並行執(zhí)行多個(gè)獨(dú)立的非同步任務(wù)時(shí)：

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));

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

使用非同步函數(shù)的 try...catch 正確管理錯(cuò)誤：

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();

---

有關(guān)異步 JavaScript 的常見常見問題解答

如果我忘記等待會(huì)發(fā)生什麼事？

函數(shù)傳回一個(gè)承諾而不是解析值。這可能會(huì)導(dǎo)致意外行為。

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 這樣的函式庫(kù)提供了基於原生 Promise 的方法。

我什麼時(shí)候應(yīng)該使用回調(diào)？

回呼對(duì)於小型、簡(jiǎn)單的任務(wù)或使用不支援 Promise 的舊 API 時(shí)仍然有用。

---

結(jié)論

掌握非同步 JavaScript 對(duì)於任何使用現(xiàn)代 Web 應(yīng)用程式的開發(fā)人員來(lái)說都是至關(guān)重要的。從回調(diào)開始，您可以了解 Promise 和 async/await 如何簡(jiǎn)化非同步程式碼並提高可讀性。謹(jǐn)慎使用回調(diào)，利用 Promise 實(shí)現(xiàn)更好的錯(cuò)誤處理，並擁抱 async/await 以獲得乾淨(jìng)、直觀的程式碼。有了這些工具，您就可以準(zhǔn)備好應(yīng)對(duì)專案中的任何非同步挑戰(zhàn)。

以上是掌握非同步 JavaScript：回呼、Promise 和簡(jiǎn)化的 Async/Await的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！