JavaScript

Asynchrones JavaScript

Promise, async, await, try catch, setTimeout, setInterval und Bedeutung von Async.

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 async und await verwenden
  • 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

  • await außerhalb passender async-Kontexte verwenden.
  • Fehler in Promises nicht behandeln.
  • Intervalle starten und nie stoppen.

Best Practices

  • Nutze try...catch bei await fü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