JavaScript Promises und Async/Await erklärt

JavaScript Promises und Async/Await erklärt

Stell dir vor, du bestellst eine Pizza online.

Du gibst deine Bestellung auf. Du stehst nicht untätig an der Tür und wartest, bis sie ankommt. Du schaust Videos, arbeitest oder unterhältst dich mit Freunden. Wenn die Pizza ankommt, isst du sie.

JavaScript funktioniert genauso.

Operationen wie API-Anfragen, Datenbankaufrufe und Timer benötigen Zeit. Wenn JavaScript auf den Abschluss jeder einzelnen Aufgabe warten würde, würde deine App einfrieren. Stattdessen führt JavaScript anderen Code aus, während es auf die Ergebnisse wartet.

Was ist ein Promise?

Ein Promise ist ein Platzhalter für einen Wert, den du in der Zukunft erhalten wirst.

Wenn du ausführst: const promise = fetch("/users");

Die Daten sind noch nicht da. Das Promise sagt: „Ich habe das Ergebnis jetzt noch nicht, aber ich sage dir Bescheid, wenn es bereit ist.“

Ein Promise hat drei Zustände:

• Pending
• Fulfilled (Erfolg)
• Rejected (Fehler)

Die meisten modernen APIs wie fetch() geben automatisch ein Promise zurück. Du musst sie nicht jedes Mal manuell erstellen. Du nutzt sie einfach.

Was macht .then()?

Viele denken, dass .then() Daten abruft. Das tut es nicht.

.then() registriert eine Callback-Funktion. Du sagst JavaScript: „Wenn dieses Promise abgeschlossen ist, führe diese spezifische Funktion aus.“

Es ist wie bei einer Essensliefer-App. Du bestellst Essen und die App sagt dir: „Ruf mich an, wenn das Essen ankommt.“ Die Funktion wartet auf das Signal.

Warum Async/Await verwenden?

Du kannst .then()-Aufrufe verketten, um Daten Schritt für Schritt zu erhalten. Das funktioniert, aber lange Ketten sind schwer zu lesen.

Async/await lässt deinen Code wie normalen, schrittweisen Code aussehen. Er ist sauberer und leichter nachvollziehbar.

Blockiert await JavaScript?

Dies ist eine häufige Interviewfrage. Die Antwort lautet: Nein.

Wenn JavaScript auf das Schlüsselwort await stößt, pausiert es nur diese spezifische async-Funktion. Der Rest deiner Anwendung läuft weiter.

Beispielhafter Ablauf:

1. Code in der Funktion ausführen.
2. Auf await treffen und diese Funktion pausieren.
3. Den Rest des Skripts ausführen.
4. Sobald die Aufgabe abgeschlossen ist, die Funktion fortsetzen.

Zusammenfassung:

• Promise = Ein zukünftiger Wert.
• fetch() = Gibt ein Promise zurück.
• .then() = Führe diese Funktion aus, wenn es bereit ist.
• await = Pausiere diese Funktion, nicht das gesamte Programm.
• async/await = Ein saubererer Weg, Promises zu schreiben.

Quelle: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm