Asynchrones JavaScript
Asynchrones JavaScript
Promise, async, await, try catch, setTimeout, setInterval und Bedeutung von Async. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- asynchronen Code erklären
- Promises mit
asyncundawaitverwenden - Timer bewusst einsetzen
Erklärung
Asynchron bedeutet, dass JavaScript nicht auf eine Aufgabe blockierend wartet. Netzwerkrequests, Timer und manche Browser-APIs liefern Ergebnisse später.
Promises repräsentieren zukünftige Ergebnisse. async-Funktionen geben Promises zurück, await wartet innerhalb der Funktion lesbar auf das Ergebnis.
Beispiele
function wait(milliseconds) {
return new Promise((resolve) => {
setTimeout(resolve, milliseconds);
});
}
await wait(1000);
console.log("Eine Sekunde später");
Ein Promise kann einen späteren Abschluss modellieren.
const intervalId = setInterval(() => {
console.log("Tick");
}, 1000);
clearInterval(intervalId);
Intervalle müssen beendet werden, wenn sie nicht mehr gebraucht werden.
Typische Fehler
awaitaußerhalb passender async-Kontexte verwenden.- Fehler in Promises nicht behandeln.
- Intervalle starten und nie stoppen.
Best Practices
- Nutze
try...catchbeiawaitfür fehleranfällige Aufgaben. - Halte asynchrone Funktionen klar benannt.
- Zeige Benutzern, wenn eine Aktion noch läuft.
Kleine Übung
Simuliere einen Speichervorgang mit setTimeout: Button deaktivieren, Ladehinweis anzeigen, danach Erfolgsmeldung setzen.
Zusammenfassung
JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026