async/await und fetch

async/await ist eine Schreibweise, mit der asynchroner Code wie normaler, nacheinander ablaufender Code aussieht. Sie baut auf Promises auf.

Grundidee

• Eine async-Funktion liefert immer ein Promise.
• Mit await wartet die Funktion auf ein Promise, ohne den Rest des Programms zu blockieren.

start
läuft schon weiter
erhalten: A
Ergebnis: AB

Fehler abfangen

Bei await nutzt du ganz normal try/catch:

Fehler: Server nicht erreichbar
fertig

Nacheinander oder parallel?

Mehrere await hintereinander laufen nacheinander. Unabhängige Aufgaben startest du besser gleichzeitig:

nacheinander ~200 ms: true
parallel ~100 ms: true a b

seq 1
seq 2
seq 3
[ 2, 4, 6 ]

Daten aus dem Netz: fetch

fetch() holt Daten per HTTP und liefert ein Promise. Es funktioniert im Browser und in Node.js (ab Version 18):

async function ladeNutzer(id) {
  const antwort = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!antwort.ok) {
    throw new Error(`HTTP-Fehler ${antwort.status}`);
  }
  const daten = await antwort.json();
  return daten.name;
}

ladeNutzer(1)
  .then(name => console.log(name))
  .catch(fehler => console.log("Fehler:", fehler.message));

Wichtig: fetch löst nur bei Netzwerkfehlern einen Fehler aus. Eine Antwort mit Status 404 oder 500 ist trotzdem eine "erfolgreiche" Antwort, daher prüfst du antwort.ok selbst.

Daten senden

const antwort = await fetch("/api/nachrichten", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ text: "Hallo" }),
});
const ergebnis = await antwort.json();

Abbrechen und Zeitlimit

abgebrochen: true
Zeitüberschreitung

Bei fetch übergibst du { signal: controller.signal }, um eine Anfrage abzubrechen. AbortSignal.timeout(5000) bricht automatisch nach 5 Sekunden ab.

Top-Level await

In ES-Modulen darfst du await auch außerhalb einer Funktion verwenden:

// in einer .mjs-Datei oder <script type="module">
const daten = await fetch("/daten.json").then(r => r.json());