首頁 > web前端 > js教程 > 主體

掌握 JavaScript 非同步程式設計

Patricia Arquette
發布: 2024-10-31 09:32:02
原創
988 人瀏覽過

Mastering Asynchronous Programming in 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!