Die Fetch-API
fetch(url) lässt den Browser eine HTTP-Anfrage senden. Sofort kommt ein Promise zurück, das normalerweise zu einer Response wird, nicht zu fertigem JSON.
Erst Response, dann Daten
await fetch(...) liefert Status, Header und Body-Stream. response.json() liest den Text, parst JSON und liefert ein weiteres Promise mit JavaScript-Daten.
Zwei getrennte Schritte
Transport und Auswertung sind getrennt. Eine Response kann einen wichtigen Status besitzen, obwohl ihr Body kein JSON ist.
📊 Von der Anfrage zu den Daten
| Ausdruck | Ergebnis | Bedeutung |
|---|---|---|
| fetch(url) | Promise<Response> | Anfrage gestartet |
| await fetch(url) | Response | Status, Header und Body-Stream |
| response.json() | Promise<any> | Body lesen und parsen |
| await response.json() | JavaScript-Daten | geparstes Objekt oder Wert |
fetch liefert ein Promise
Das eigenständige Beispiel nutzt eine Blob-URL nur für den Rückgabetyp. Sie ist eine Browserressource im Speicher, kein gleichursprünglicher HTTP-Endpunkt.
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
const ticket = fetch(url);
console.log(ticket instanceof Promise);
ticket.finally(() => URL.revokeObjectURL(url));
Die Ausgabe ist true. In einer Anwendung ersetzt du die Blob-URL etwa durch /data/drink.json.
Response und danach JSON erwarten
Das nächste Beispiel erstellt dieselbe lokale Ressource und führt beide Schritte aus.
async function loadDrink() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
console.log(data.drink);
} finally {
URL.revokeObjectURL(url);
}
}
loadDrink();
Die Ausgabe ist lida tea. Eine echte Datei /data/drink.json könnte {"drink":"lida tea"} enthalten; das Lesen bleibt gleich.
HTTP-Fehler ausdrücklich prüfen
Bei HTTP 404 oder 500 wird fetch normalerweise trotzdem erfüllt. Netzwerkfehler können ablehnen, ein schlechter Status allein meist nicht. Prüfe response.ok oder response.status.
const response = new Response("Not found", {
status: 404,
statusText: "Not Found"
});
console.log(response.ok);
console.log(response.status);
Die erzeugte Response zeigt false und 404: genau diese Eigenschaften würdest du nach einem echten Fetch prüfen. Parse eine Fehlerseite nur bei zugesichertem JSON.
json liefert ebenfalls ein Promise
json() liest und parst den Body asynchron.
const response = new Response('{"drink":"lida tea"}', {
headers: { "Content-Type": "application/json" }
});
const dataPromise = response.json();
console.log(dataPromise instanceof Promise);
dataPromise.then(data => console.log(data.drink));
Die Ausgabe ist true. Nach await response.json() ist data das JavaScript-Objekt und data.drink die Zeichenkette.
Seitendemo ohne Endpunkt
Die Demo lädt eine Blob-URL und funktioniert allein. Sie zeigt den Ablauf und Status 200, ist aber keine Serveranfrage.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
async function load() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
document.getElementById("cup").textContent = data.drink;
document.getElementById("line").textContent =
response.status + " / " + data.drink;
} finally {
URL.revokeObjectURL(url);
}
}
load();
</script>
</body>
</html>
Die Seite zeigt 200 / lida tea. Verwende in Produktion eine HTTP-URL und prüfe vor dem Parsen weiterhin ok.
Übung
Lege auf einem lokalen Server /data/drink.json an und ersetze die Blob-URL. Rufe danach einen fehlenden Pfad auf und vergleiche ok und status.
Häufige Fehler
Verwechsle das Fetch-Promise nicht mit Daten. Rufe json() auf und warte darauf. Verlasse dich bei 404 nicht allein auf catch.
Merksatz
fetch sendet eine Anfrage und liefert ein Promise für Response. Prüfe ok, dann parse den erwarteten Body. response.json() liefert ein Daten-Promise.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt