同步編程是 JavaScript 中的一個(gè)重要概念，使您能夠在不阻塞主線程的情況下處理 API 調(diào)用、文件讀取和計(jì)時(shí)器等操作。如果您對這個(gè)概念不熟悉或想鞏固您的理解，這篇文章適合您！

什么是異步編程？

在同步編程中，任務(wù)是一個(gè)接一個(gè)執(zhí)行的，這可能會(huì)導(dǎo)致資源使用效率低下，尤其是在處理需要時(shí)間的操作（如網(wǎng)絡(luò)請求）時(shí)。異步編程允許您的代碼在等待這些操作完成的同時(shí)運(yùn)行，從而提高性能和響應(yīng)能力。

關(guān)鍵概念

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

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

1?；卣{(diào)

回調(diào)是作為參數(shù)傳遞給另一個(gè)函數(shù)的函數(shù)，并在任務(wù)完成后執(zhí)行。雖然簡單，但當(dāng)您有嵌套函數(shù)時(shí)，回調(diào)可能會(huì)導(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 代表了一個(gè)可能現(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();

錯(cuò)誤處理

使用異步代碼時(shí)，正確的錯(cuò)誤處理至關(guān)重要。有了promise，你可以使用.catch()，有了async/await，你可以使用try/catch塊。

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

讓我們把它放在上下文中。下面是使用 fetch 從 API 獲取數(shù)據(jù)的示例，它返回一個(gè) 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 中的異步編程允許您編寫高效且響應(yīng)迅速的代碼。通過掌握回調(diào)、Promise 和 async/await，您將能夠優(yōu)雅地處理異步操作。

以上是掌握 JavaScript 異步編程的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！