new Response() — Methode · JavaScript-Referenz

Signatur

new Response(body, options)

Beschreibung

Mit new Response() erzeugen Sie selbst ein HTTP-Antwortobjekt, ohne dass eine Netzwerkanfrage stattfindet. Normalerweise erhalten Sie ein Response-Objekt als Ergebnis von fetch(). Den Konstruktor brauchen Sie vor allem in Service Workern (eigene Antworten im fetch-Event, Offline-Seiten, Cache-Einträge), in Tests (Mocken von fetch) und in serverseitigen Laufzeitumgebungen wie Node.js, Deno, Bun oder Cloudflare Workers, die die Fetch-API für HTTP-Handler nutzen.

Als Body sind viele Typen erlaubt: Zeichenketten, Blob, ArrayBuffer, typisierte Arrays, DataView, FormData, URLSearchParams und ReadableStream. Bei manchen Typen setzt der Konstruktor den Content-Type-Header automatisch, z. B. text/plain;charset=UTF-8 bei Zeichenketten oder application/x-www-form-urlencoded;charset=UTF-8 bei URLSearchParams.

Über das Objekt options legen Sie status, statusText und headers fest. Wenn Sie JSON zurückgeben wollen, ist die statische Methode Response.json() meist bequemer. Sie serialisiert die Daten und setzt den passenden Header gleich mit.

Parameter

Name	Typ	Default	Beschreibung
$body	string \| Blob \| ArrayBuffer \| TypedArray \| DataView \| FormData \| URLSearchParams \| ReadableStream \| null	null	Inhalt der Antwort. Ohne Angabe oder bei `null` hat die Antwort keinen Body.
$options	object	{}	Einstellungen für die Antwort, siehe die folgenden Felder.
$options.status	number	200	HTTP-Statuscode im Bereich 200–599. Werte außerhalb davon lösen einen `RangeError` aus.
$options.statusText	string	""	Statusmeldung, z. B. `"Not Found"`. Sie muss der HTTP-Syntax für reason-phrase entsprechen.
$options.headers	Headers \| object \| Array<[string, string]>		Header der Antwort, als `Headers`-Objekt, einfaches Objekt oder Array von Schlüssel-Wert-Paaren.

Rückgabewert

Typ

Response

Beschreibung

Ein neues Response-Objekt mit type "default". Den Body lesen Sie mit text(), json(), blob() und ähnlichen Methoden.

Beispiele

Einfache Text-Antwort erzeugen und lesen

const res = new Response('Hallo Welt', {
  status: 200,
  headers: { 'X-Quelle': 'lokal' }
});

console.log(res.status, res.ok);
console.log(res.headers.get('Content-Type'));
console.log(await res.text());

200 true text/plain;charset=UTF-8 Hallo Welt

JSON-Antwort mit Fehlerstatus (z. B. im Server-Handler)

const notFound = (pfad) =>
  new Response(JSON.stringify({ fehler: `${pfad} nicht gefunden` }), {
    status: 404,
    statusText: 'Not Found',
    headers: { 'Content-Type': 'application/json; charset=utf-8' }
  });

const res = notFound('/api/user/42');
console.log(res.status, res.ok);
console.log(await res.json());

404 false { fehler: '/api/user/42 nicht gefunden' }

Offline-Fallback im Service Worker

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request).catch(() =>
      new Response('<h1>Sie sind offline</h1>', {
        status: 503,
        headers: { 'Content-Type': 'text/html; charset=utf-8' }
      })
    )
  );
});

fetch in Tests mocken und Stream-Body verwenden

const stream = new ReadableStream({
  start(controller) {
    const enc = new TextEncoder();
    controller.enqueue(enc.encode('{"id":1,'));
    controller.enqueue(enc.encode('"name":"Anna"}'));
    controller.close();
  }
});

globalThis.fetch = async () => new Response(stream, {
  headers: { 'Content-Type': 'application/json' }
});

const daten = await (await fetch('/api/user/1')).json();
console.log(daten.name);

Anna

// Wichtig · Fallstricke

Body nur einmal lesbar: Nach text(), json() usw. ist bodyUsed gleich true. Ein zweiter Leseversuch löst einen TypeError aus. Wenn Sie den Body mehrfach brauchen, etwa für Cache und Seite zugleich, rufen Sie vorher response.clone() auf.
Statuscodes: status muss zwischen 200 und 599 liegen, sonst gibt es einen RangeError. Bei 204, 205 und 304 ist kein Body erlaubt. Ein Body mit diesen Codes löst einen TypeError aus, verwenden Sie also null.
Kein automatisches JSON: Ein Objekt als body wird in "[object Object]" umgewandelt. Nutzen Sie JSON.stringify() oder Response.json().
Selbst erzeugte Antworten haben url === "" und redirected === false. Für Weiterleitungen gibt es Response.redirect(), für Netzwerkfehler Response.error().
Einige Header wie Set-Cookie werden im Browser beim Lesen gefiltert. In Service Workern gelten zusätzlich CORS-Regeln bei opaque-Antworten.
Kompatibilität: Der Konstruktor funktioniert in allen modernen Browsern und seit Node.js 18 global ohne Import. Ältere Node-Versionen brauchen node-fetch oder undici. Ein ReadableStream als Body ist in älteren Browsern teilweise nicht verfügbar.

Siehe auch

Response Response.redirect() Response.prototype.clone() Headers Request FetchEvent.respondWith()