掌握 JavaScript 非同步程式設計

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

什麼是非同步程式設計？

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

關鍵概念

1. 回調
2. 承諾
3. 非同步/等待

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

1。回調

回呼是作為參數傳遞給另一個函數的函數，並在任務完成後執行。雖然簡單，但當您有巢狀函數時，回調可能會導致“回調地獄”。

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

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

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

以下是如何使用 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。您將函數定義為非同步，並且在該函數中，您可以使用await 暫停執行，直到解決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();

錯誤處理

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

現實世界的例子

讓我們把它放在上下文中。以下是使用 fetch 從 API 取得資料的範例，它傳回一個 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);

結論

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

以上是掌握 JavaScript 非同步程式設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！