同步程式設(shè)計是 JavaScript 中的重要概念，可讓您在不阻塞主執(zhí)行緒的情況下處理 API 呼叫、檔案讀取和計時器等操作。如果您對這個概念不熟悉或想鞏固您的理解，這篇文章適合您！

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

在同步編程中，任務(wù)是一個接一個執(zhí)行的，這可能會導(dǎo)致資源使用效率低下，尤其是在處理需要時間的操作（如網(wǎng)路請求）時。非同步程式設(shè)計可讓您的程式碼在等待這些操作完成的同時運行，從而提高效能和回應(yīng)能力。

關(guān)鍵概念

1. 回調(diào)
2. 承諾
3. 非同步/等待

讓我們逐一分解這些概念。

1?；卣{(diào)

回呼是作為參數(shù)傳遞給另一個函數(shù)的函數(shù)，並在任務(wù)完成後執(zhí)行。雖然簡單，但當(dāng)您有巢狀函數(shù)時，回調(diào)可能會導(dǎo)致“回調(diào)地獄”。

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

fetchData((data) => {
    console.log(data); // Output: Data received!
});

**2。承諾
**Promise 提供了回調(diào)的更清晰的替代方案。 Promise 代表了一個可能現(xiàn)在可用、將來可用、或永遠(yuǎn)不可用的值。它可以處於三種狀態(tài)之一：待處理、已完成或已拒絕。

以下是如何使用 Promise：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "Data received!";
            resolve(data); // or reject(error);
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // Output: Data received!
    })
    .catch((error) => {
        console.error(error);
    });

**3。非同步/等待

ES2017 中引入的 async 和 wait 提供了一種更易讀的方式來處理 Promise。您將函數(shù)定義為非同步，並且在該函數(shù)中，您可以使用await 暫停執(zhí)行，直到解決promise。

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

async function getData() {
    try {
        const data = await fetchData();
        console.log(data); // Output: Data received!
    } catch (error) {
        console.error(error);
    }
}

getData();

錯誤處理

使用非同步程式碼時，正確的錯誤處理至關(guān)重要。有了promise，你可以使用.catch()，有了async/await，你可以使用try/catch區(qū)塊。

現(xiàn)實世界的例子

讓我們把它放在上下文中。以下是使用 fetch 從 API 取得資料的範(fàn)例，它傳回一個 Promise：

async function fetchUserData(userId) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        const userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error("Fetch error:", error);
    }
}

fetchUserData(1);

結(jié)論

JavaScript 中的非同步程式設(shè)計可讓您編寫高效且反應(yīng)迅速的程式碼。透過掌握回呼、Promise 和 async/await，您將能夠優(yōu)雅地處理非同步操作。

以上是掌握 JavaScript 非同步程式設(shè)計的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！