it-praxisportal/courses/javascript/06_async_await_und_fetch

🌐 JS 06: Async/Await & REST APIs (Fetch)

Willkommen zu Modul 06 des JavaScript-Kurses! Hier lernst du die modernste und eleganteste Art kennen, um mit asynchronen Daten und Web-APIs in JavaScript zu arbeiten: async und await.

---

📖 1. Was ist async / await?

Mit ECMAScript 2017 (ES8) wurde async/await eingeführt. Es ist sogenannte syntaktische Versüßung (Syntactic Sugar) über JavaScript Promises:

• Asynchroner Code sieht plötzlich aus und verhält sich wie linearer, synchroner Code.
• Keine unübersichtlichen .then()-Ketten mehr.
• Fehler werden mit gewohntem try { ... } catch (err) { ... } abgefangen.

---

📚 2. Die Buch-Lese-Analogie

Stell dir vor, wie du ein Buch liest:

• Mit Callbacks & Chaining (.then()): Es ist wie ein Buch, bei dem jedes Kapitel auf Seite 80 verweist („Wenn du wissen willst, wie es weitergeht, lies Fußnote 4 auf Seite 80 und springe dann zu Kapitel 7“). Du springst ständig hin und her.
• Mit async/await: Du liest die Geschichte ganz natürlich Zeile für Zeile von oben nach unten. Wenn an einer Stelle ein Briefbote eintrifft (asynchrones Laden via await), pausiert der Erzähler kurz, nimmt den Brief entgegen und liest nahtlos im Text weiter.

---

⚙️ 3. Die async-Funktion

Wird das Schlüsselwort async vor eine Funktion gesetzt:

1. Gibt die Funktion immer ein Promise zurück.
2. Jeder return-Wert wird automatisch in ein aufgelöstes Promise (Promise.resolve(...)) eingepackt.
3. Jeder nicht abgefangene Fehler (throw new Error(...)) wird zu einem abgewiesenen Promise (Promise.reject(...)).

async function holeBegruessung(name) {
  return `Hallo ${name}!`; // Gibt Promise { <fulfilled>: "Hallo Anna!" } zurück
}

holeBegruessung("Anna").then(text => console.log(text));

---

⏳ 4. Der await-Operator

await kann nur innerhalb von async-Funktionen verwendet werden. Es pausiert die Ausführung der aktuellen Funktion, bis das Promise aufgelöst oder abgewiesen wurde:

async function ladeBenutzer() {
  console.log("Starte Abruf...");
  
  // Pausiert die Funktion 'ladeBenutzer', aber blockiert NICHT den Browser-Thread!
  const benutzer = await apiCall("/user/1");
  
  console.log("Fertig:", benutzer.name);
  return benutzer;
}

---

⚖️ 5. Direktvergleich: Promises vs. Async/Await

Vorher: Promise-Chaining (.then())

function holeDatenMitThen() {
  return fetch("https://api.beispiel.de/daten")
    .then(response => {
      if (!response.ok) throw new Error("Netzwerkfehler");
      return response.json();
    })
    .then(daten => {
      console.log("Ergebnis:", daten);
      return daten;
    })
    .catch(err => {
      console.error("Fehler:", err.message);
    });
}

Jetzt: Modernes async/await

async function holeDatenMitAsync() {
  try {
    const response = await fetch("https://api.beispiel.de/daten");
    if (!response.ok) throw new Error(`HTTP-Fehler: ${response.status}`);
    
    const daten = await response.json();
    console.log("Ergebnis:", daten);
    return daten;
  } catch (err) {
    console.error("Fehler:", err.message);
  }
}

---

🌐 6. REST-APIs abfragen mit fetch()

Beim Abfragen einer REST-API mit fetch() laufen in der Praxis zwei asynchrone Schritte ab:

1. HTTP-Verbindung aufbauen & Statuscode prüfen:

   const response = await fetch(url);
   if (!response.ok) {
     // response.status enthält den HTTP-Code (z. B. 404 Not Found oder 500 Server Error)
     throw new Error(`Fehler: ${response.status}`);
   }
   

2. JSON-Body asynchron parsen:

   const jsonData = await response.json();
   

---

🛡️ 7. Robuste Fehlerbehandlung mit try ... catch

Mit try ... catch können sowohl synchrone JavaScript-Laufzeitfehler als auch asynchrone Promise-Rejections an zentraler Stelle abgefangen werden:

async function sichereAktion() {
  try {
    const erg = await riskanteOperation();
    return erg;
  } catch (err) {
    console.warn("Operation fehlgeschlagen, verwende Fallback:", err.message);
    return { status: "fallback_aktiv" };
  }
}

---

🎯 8. Deine Aufgaben in aufgabe.js

1. holeWetterDaten(stadtName, mockApiFetcher): Rufe await mockApiFetcher(stadtName) auf. Prüfe response.ok. Wenn false, wirf einen Fehler. Wenn true, parse JSON (await response.json()) und gib { stadt, temperatur, wetterlage } zurück.
2. aggregiereBenutzerPosts(userId, mockPostApiFetcher): Rufe await mockPostApiFetcher(userId) auf. Aggregiere die Posts zu { userId, anzahlPosts, postTitel }.
3. sichererApiAufruf(apiPromiseOderFn, standardFallback): Führe ein Promise oder eine async Funktion im try-Block aus. Fange Fehler im catch-Block ab und gib standardFallback zurück.