Startseite >JavaScript >JavaScript-Referenz – Methoden und Objekte >fetch()

fetch()

const response = await fetch(url, options)

Sendet eine HTTP-Anfrage und gibt ein Promise mit einem Response-Objekt zurück. Der Body der Antwort wird separat gelesen – mit json(), text() oder blob().

Die Beispiele mit fetch() rufen eine Beispiel-API auf derselben Website auf: /api/products liefert eine Produktliste in JSON, /api/products/1 ein Produkt (eine nicht vorhandene ID liefert 404), /api/slow antwortet nach 3 Sekunden.

Parameter

url – die Adresse; eine relative Adresse wird relativ zur Seite aufgelöst.
options – optional: method, headers, body, signal (Abbrechen), credentials (Cookies für eine andere Domain), cache.

Rückgabewert

Ein Promise mit einem Response-Objekt (ok, status, headers, json(), text()…).

Beispiele

const response = await fetch('/api/products');
console.log(response.ok, response.status, response.headers.get('Content-Type'));
const products = await response.json();
console.log(products.map((p) => p.name));

Ausgabe:

true 200 application/json; charset=utf-8
[ 'Kaffeebohnen 1 kg', 'Grüner Tee', 'Blütenhonig' ]

Ein Fehler 404 ist keine Ausnahme – prüfen Sie ok. Nur ein Netzwerkfehler wirft:

const load = async (url) => {
  const o = await fetch(url);
  if (!o.ok) throw new Error(`Server antwortete mit ${o.status}`);
  return o.json();
};
try {
  await load('/api/products/99');
} catch (e) {
  console.log(e.message);
}
try {
  await fetch('http://127.0.0.1:1/');
} catch (e) {
  console.log('Netzwerk:', e.name);
}

Ausgabe:

Server antwortete mit 404
Netzwerk: TypeError

JSON senden:

const o = await fetch('/api/send', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Jana', qty: 2 }),
});
console.log(o.status, await o.json());

Ausgabe:

201 { received: '{"name":"Jana","qty":2}', type: 'application/json' }

Worauf Sie achten sollten

Ein Status 404 oder 500 lehnt das Promise nicht ab – prüfen Sie immer response.ok oder status.
Eine Anfrage an eine andere Domain muss der Server mit CORS-Headern erlauben, sonst endet sie mit einem Netzwerkfehler.
PHP legt einen JSON-Body (Content-Type: application/json) nicht in $_POST ab – lesen Sie ihn mit file_get_contents('php://input').
Der Body einer Antwort lässt sich nur einmal lesen.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit März 2017, gilt als weithin verfügbar seit September 2019. Ab Version: Chrome 42, Firefox 39, Safari 10.1; Node.js 18.0.0. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
Response.json()
Response.text()
AbortController
async function
FormData