Middle
Erzähle mir von den Prinzipien der Asynchronität in JavaScript.
sobes.tech KI
Antwort von AI
Die Prinzipien der Asynchronität in JavaScript basieren auf einem Single-Thread-Ausführungsmodell, bei dem Aufgaben, die viel Zeit in Anspruch nehmen können (z.B. Netzwerk-Anfragen, Timer), den Haupt-Thread nicht blockieren, sodass andere Aktionen ausgeführt werden können. Dies wird erreicht durch:
- Event Loop (Ereignisschleife): Ein Mechanismus, der ständig die Nachrichtenwarteschlange überprüft und Aufgaben daraus ausführt. Wenn eine asynchrone Operation abgeschlossen ist, wird ihr Callback in die Aufgabenwarteschlange gestellt.
- Callback-Funktionen: Funktionen, die als Argument an eine andere Funktion übergeben werden und nach Abschluss der asynchronen Operation ausgeführt werden.
- Promises (Versprechen): Objekte, die einen endgültigen Wert einer asynchronen Operation repräsentieren, der entweder erfolgreich (resolved) oder abgelehnt (rejected) werden kann. Sie erleichtern die Arbeit mit asynchronem Code und vermeiden "Callback-Hölle".
- Async/Await: Syntaktischer Zucker über Promises, der es ermöglicht, asynchronen Code in einem lesbareren, synchronen Stil zu schreiben. Funktionen, die mit
asyncmarkiert sind, geben immer eine Promise zurück. Der Operatorawaitkann nur innerhalb vonasync-Funktionen verwendet werden und pausiert die Ausführung, bis die Promise erfüllt ist.
Vergleich der Ansätze:
| Ansatz | Lesbarkeit | Fehlerbehandlung | Parallele Ausführung |
|---|---|---|---|
| Callbacks | Niedrig | Komplex | Kann trivial sein |
| Promises | Mittel | Bequem | .all(), .race() |
| Async/Await | Hoch | Bequem (try/catch) | Leicht komplexer |
Beispiel für die Verwendung von Promises:
fetch('/api/data') // Asynchrone Operation
.then(response => response.json()) // Erfolgreiche Verarbeitung
.then(data => console.log(data)) // Datenverarbeitung
.catch(error => console.error('Fehler:', error)); // Fehlerbehandlung
Beispiel für die Verwendung von Async/Await:
async function fetchData() {
try {
const response = await fetch('/api/data'); // Warten auf Promise
const data = await response.json(); // Warten auf Promise
console.log(data);
} catch (error) {
console.error('Fehler:', error); // Fehlerbehandlung
}
}
fetchData();