Grundlegendes zur asynchronen JavaScript-Programmierung: Rückrufe, Versprechen und Async/Await

Die asynchrone Natur von JavaScript ist entscheidend für die Erstellung von Apps, die benutzerfreundlich, reaktionsschnell und effizient sind. Für eine erfolgreiche Navigation ist es von entscheidender Bedeutung, die grundlegenden Ideen der asynchronen Programmierung zu verstehen, z. B. Rückrufe, Versprechen und Async/Await. In diesem Handbuch werden diese Ideen analysiert und ihre Anwendungen, Vor- und Nachteile untersucht.

---

Asynchrone vs. synchrone Programmierung

Synchronisierte Programmierung:

• Bei der synchronen Programmierung werden Aufgaben nacheinander ausgeführt. Das Programm wartet auf den Abschluss einer Aufgabe, bevor es mit der nächsten fortfährt.
• Dieser Ansatz kann zu Ineffizienzen führen, insbesondere bei zeitaufwändigen Vorgängen wie Netzwerkanfragen oder Dateiverarbeitung.

Beispiel für synchronen Code:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

Asynchrone Programmierung:

• Asynchrone Programmierung ermöglicht die unabhängige Ausführung von Aufgaben, sodass das Programm weiterhin andere Vorgänge ausführen kann, während es auf den Abschluss einiger Aufgaben wartet.
• Dies ist besonders nützlich für Aufgaben wie das Abrufen von Daten von einem Server, bei denen das Warten andernfalls zum Einfrieren der Benutzeroberfläche führen könnte.

---

Warum brauchen wir asynchrone Programmierung?

1. Reaktionsfähigkeit: Verhindert, dass die Benutzeroberfläche bei langen Vorgängen nicht mehr reagiert.
2. Effizienz: Ermöglicht die gleichzeitige Ausführung mehrerer Vorgänge und optimiert so die Ressourcennutzung.
3. Benutzererfahrung: Verbessert Interaktionen durch Gewährleistung reibungsloser und unterbrechungsfreier Arbeitsabläufe.

---

Rückrufe

Definition: Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben und nach Abschluss einer Aufgabe ausgeführt wird.

Beispiel:

function fetchData(callback) {
    console.log("Fetching data...");
    setTimeout(() => {
        const data = "Data received"; // Simulate fetched data
        callback(data); // Execute the callback with the data
    }, 2000);
}

fetchData((data) => {
    console.log(data); // Logs after data is fetched
});

Erklärung:

• Die fetchData-Funktion simuliert eine Verzögerung mithilfe von setTimeout.
• Sobald die Verzögerung endet, wird der Rückruf mit den abgerufenen Daten ausgeführt.

Probleme mit Rückrufen:

• Callback Hell: Wenn mehrere asynchrone Vorgänge voneinander abhängen, erschweren tief verschachtelte Callbacks das Lesen und Warten des Codes.

---

Versprechen

Definition: Ein Versprechen ist ein Objekt, das den eventuellen Abschluss (oder Misserfolg) einer asynchronen Operation und den daraus resultierenden Wert darstellt.

Vorteile:

• Vereinfacht die Verkettung asynchroner Vorgänge.
• Bietet eine bessere Fehlerbehandlung im Vergleich zu Rückrufen.

Beispiel:

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data...");
        setTimeout(() => {
            const data = "Data received";
            resolve(data); // Resolve the promise with data
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // Logs after promise is resolved
    })
    .catch(error => {
        console.error(error); // Handles errors
    });

Erklärung:

• Versprechen verbessern die Lesbarkeit, indem sie .then() für den Erfolg und .catch() für die Fehlerbehandlung verketten.
• Sie beseitigen die für Rückrufe typische verschachtelte Struktur.

---

Asynchron/Warten

Definition: Async/await ist syntaktischer Zucker, der auf Versprechen aufbaut und es Ihnen ermöglicht, asynchronen Code zu schreiben, der eher wie synchroner Code aussieht und sich verhält.

Vorteile:

• Verbessert die Lesbarkeit und Wartbarkeit des Codes.
• Behandelt asynchrone Logik einfacher.

Beispiel:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

Erklärung:

• Das Schlüsselwort async gibt an, dass die Funktion asynchronen Code enthält.
• Das Schlüsselwort „await“ unterbricht die Ausführung, bis das Versprechen aufgelöst wird, sodass der Code synchron erscheint, aber nicht blockiert.

---

Zusammenfassung der wichtigsten Punkte

1. Synchron vs. Asynchron:

   • Synchroner Code blockiert die Ausführung, bis die Aufgaben abgeschlossen sind.
   • Asynchroner Code ermöglicht die gleichzeitige Ausführung anderer Aufgaben.

2. Rückrufe:

   • Eine übergebene Funktion zur Verarbeitung asynchroner Ergebnisse.
   • Anfällig für Callback-Hölle mit komplexen Abhängigkeiten.

3. Versprechen:

   • Eine sauberere Alternative zu Rückrufen, die Verkettung und Fehlerbehandlung unterstützt.

4. Asynchron/Warten:

   • Macht asynchronen Code besser lesbar und wartbar.

---

Sie können JavaScript-Anwendungen entwickeln, die effektiv und einfach zu verwenden sind, indem Sie diese Strategien verstehen und anwenden. Das Erlernen der asynchronen Programmierung ist unerlässlich, um ein erfahrener JavaScript-Entwickler zu werden, unabhängig davon, ob Sie einfache Aufgaben verwalten oder komplexe Arbeitsabläufe erstellen.

Folgen Sie mir auf: Github Linkedin Threads

Das obige ist der detaillierte Inhalt vonGrundlegendes zur asynchronen JavaScript-Programmierung: Rückrufe, Versprechen und Async/Await. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!