𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 𝗮𝗻𝗱 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱
Stell dir vor, du bestellst eine Pizza online.
Du stehst nicht untätig an deiner Tür, bis sie ankommt. Du schaust Videos, arbeitest oder unterhältst dich mit Freunden. Wenn die Pizza ankommt, isst du sie.
JavaScript funktioniert genauso.
Aufgaben wie API-Anfragen oder Datenbankaufrufe benötigen Zeit. Wenn JavaScript bei jeder Aufgabe warten würde, würde deine App einfrieren. Stattdessen führt es während des Wartens weiterhin anderen Code aus.
Ein Promise repräsentiert einen Wert, der in der Zukunft eintrifft.
Ein Promise hat drei Zustände:
- Pending
- Fulfilled (Erfolg)
- Rejected (Fehler)
Du siehst selten den Code, der verwendet wird, um ein neues Promise zu erstellen. Das liegt daran, dass moderne Tools wie fetch() bereits ein Promise für dich zurückgeben.
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 Funktion aus.“
Es ist wie bei einer Liefer-App. Du bestellst Essen und die App sagt: „Ruf mich an, wenn das Essen ankommt.“ Die Funktion wartet auf das Ergebnis.
Warum Async/Await verwenden?
Du kannst .then()-Aufrufe verketten, um erst Benutzerdaten, dann Beiträge und dann Kommentare abzurufen. Das funktioniert zwar, aber lange Ketten sind schwer zu lesen.
Async/Await lässt 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:
- Code in der async-Funktion ausführen.
- Auf await treffen und diese Funktion pausieren.
- Den Rest der Anwendung ausführen.
- Wenn die Aufgabe abgeschlossen ist, die async-Funktion fortsetzen.
Async/Await ist nur eine sauberere Art, Promises zu schreiben. Es ist Syntactic Sugar.
Wichtigste Erkenntnisse:
- Promise = Ein zukünftiger Wert.
- fetch() = Gibt ein Promise zurück.
- .then() = Führe dies aus, wenn es bereit ist.
- await = Pausiere diese Funktion, nicht das gesamte Programm.
- async/await = Sauberere Promise-Syntax.
Quelle: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm