Beherrschen der asynchronen Programmierung in JavaScript

Synchronisierte Programmierung ist ein entscheidendes Konzept in JavaScript, das es Ihnen ermöglicht, Vorgänge wie API-Aufrufe, Dateilesen und Timer zu verarbeiten, ohne den Hauptthread zu blockieren. Wenn Sie mit dem Konzept noch nicht vertraut sind oder Ihr Verständnis festigen möchten, ist dieser Beitrag genau das Richtige für Sie!

Was ist asynchrone Programmierung?

Bei der synchronen Programmierung werden Aufgaben nacheinander ausgeführt, was zu einer ineffizienten Nutzung von Ressourcen führen kann, insbesondere bei zeitaufwändigen Vorgängen (wie Netzwerkanfragen). Durch die asynchrone Programmierung kann Ihr Code ausgeführt werden, während er auf den Abschluss dieser Vorgänge wartet, wodurch Leistung und Reaktionsfähigkeit verbessert werden.

Schlüsselkonzepte

1. Rückrufe
2. Versprechen
3. Asynchron/Warten

Lassen Sie uns jedes dieser Konzepte aufschlüsseln.

1. Rückrufe

Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben und ausgeführt wird, sobald eine Aufgabe abgeschlossen ist. Auch wenn Rückrufe einfach sind, können sie zur „Rückrufhölle“ führen, wenn Sie verschachtelte Funktionen haben.

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

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

**2. Versprechen
**Versprechen bieten eine sauberere Alternative zu Rückrufen. Ein Versprechen stellt einen Wert dar, der jetzt, in der Zukunft oder nie verfügbar sein kann. Es kann einen von drei Status haben: ausstehend, erfüllt oder abgelehnt.

So verwenden Sie Versprechen:

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. Asynchron/Warten

Async und Wait wurden in ES2017 eingeführt und bieten eine besser lesbare Möglichkeit, mit Versprechen zu arbeiten. Sie definieren eine Funktion als asynchron und können innerhalb dieser Funktion „await“ verwenden, um die Ausführung anzuhalten, bis ein Versprechen aufgelöst ist.

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

Fehlerbehandlung

Bei der Arbeit mit asynchronem Code ist eine ordnungsgemäße Fehlerbehandlung unerlässlich. Mit Versprechen können Sie.catch() verwenden, und mit async/await können Sie try/catch-Blöcke verwenden.

Beispiel aus der Praxis

Lassen Sie uns dies in einen Zusammenhang bringen. Hier ist ein Beispiel für das Abrufen von Daten von einer API mithilfe von fetch, das ein Versprechen zurückgibt:

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

Abschluss

Asynchrone Programmierung in JavaScript ermöglicht Ihnen das Schreiben von effizientem und reaktionsfähigem Code. Wenn Sie Callbacks, Promises und Async/Warten beherrschen, sind Sie bestens gerüstet, um asynchrone Vorgänge elegant abzuwickeln.

Das obige ist der detaillierte Inhalt vonBeherrschen der asynchronen Programmierung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!