Die Fetch API ist die moderne Schnittstelle des Browsers, um Netzwerk-Anfragen aus JavaScript heraus zu senden. Mit fetch(url) holt man Daten von einem Server — sie ist der zeitgemäße Nachfolger des älteren XMLHttpRequest (XHR), der in AJAX-Anwendungen verwendet wurde.
Grundlagen
fetch() gibt ein asynchrones Promise zurück, das mit einem Response-Objekt aufgelöst wird. Im Gegensatz zu XHR ist die API deutlich einfacher aufgebaut und liefert von Haus aus saubere Promises statt Callbacks.
fetch('https://api.example.com/daten')
.then(response => response.json())
.then(daten => console.log(daten));Die Antwort wird dabei in zwei Schritten verarbeitet: Zuerst erhält man die Response (Status, Header), dann liest man den Inhalt — zum Beispiel als JSON über response.json().
Optionen und Methoden
fetch('/api/artikel', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ titel: 'Beispiel' })
});- method: GET, POST, PUT, DELETE und weitere HTTP-Methoden.
- headers: Zusätzliche Header wie Content-Type oder Authentifizierungs-Token.
- body: Der Inhalt bei POST/PUT-Anfragen.
- mode: Steuert das Verhalten bei CORS-Anfragen.
Fehlerbehandlung
Ein wichtiger Unterschied zu XHR: fetch() verwirft das Promise nur bei Netzwerkfehlern. Ein HTTP-Status wie 404 oder 500 gilt als erfolgreiche Antwort — man muss response.ok oder response.status selbst prüfen.
fetch('/api/daten')
.then(response => {
if (!response.ok) throw new Error('HTTP ' + response.status);
return response.json();
})
.catch(fehler => console.error(fehler));Verwandte Grundlagen: AJAX, XHR, API, Service Worker, SPA.