JS 05: Callbacks, Event Loop & Promises

⚡ 1. Synchron vs. Asynchron & Event Loop

JavaScript ist Single-Threaded. Wenn eine Aufgabe Zeit benötigt (z. B. Timer, Netzwerk-Aufrufe, Dateilesen), darf sie den Hauptthread nicht blockieren.

Der Event Loop sorgt dafür, dass asynchrone Callbacks in einer Warteschlange verwaltet und erst ausgeführt werden, wenn der Haupt-Callstack frei ist.

📊 2. Das Promise-Zustandsdiagramm

Ein Promise ist ein Stellvertreter-Objekt für einen zukünftigen Wert. Es befindet sich immer in genau einem von drei Zuständen:

🛠️ 3. Eigene Promises & Chaining

Ein Promise wird mit new Promise((resolve, reject) => { ... }) erzeugt:

// 1. Promise definieren
function ladeDaten(id) {
  return new Promise((resolve, reject) => {
    if (id > 0) {
      setTimeout(() => resolve({ id: id, status: "ok" }), 100);
    } else {
      reject(new Error("ID muss positiv sein"));
    }
  });
}

// 2. Promise verketten (Chaining)
ladeDaten(42)
  .then(daten => {
    console.log("Geladen:", daten);
    return daten.id * 2;
  })
  .then(verdoppelt => console.log("Verdoppelt:", verdoppelt))
  .catch(err => console.error("Fehler:", err.message))
  .finally(() => console.log("Vorgang abgeschlossen."));

🚀 Parallelisierung mit Promise.all()

// Lädt quelleA und quelleB parallel und wartet auf beide
Promise.all([quelleA, quelleB])
  .then(([resA, resB]) => console.log("Beide fertig:", resA, resB))
  .catch(err => console.error("Mindestens eine Quelle schlug fehl:", err));

🎯 Aufgaben & Checkliste