Response: json()-statische Methode

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die json()-statische Methode des Response-Interfaces gibt eine Response zurück, die die angegebenen JSON-Daten als Body enthält und einen Content-Type-Header, der auf application/json gesetzt ist. Der Antwortstatus, Statusmeldung und zusätzliche Header können ebenfalls festgelegt werden.

Die Methode erleichtert das Erstellen von Response-Objekten zum Zurückgeben von JSON-codierten Daten. Service Worker zum Beispiel fangen Fetch-Anfragen, die von einem Browser gesendet werden, ab und könnten json() verwenden, um eine Response aus zwischengespeicherten JSON-Daten zu erstellen, die an den Hauptthread zurückgegeben wird. Die json()-Methode kann auch im Servercode verwendet werden, um JSON-Daten für Single-Page-Anwendungen und alle anderen Anwendungen, bei denen eine JSON-Antwort erwartet wird, zurückzugeben.

Syntax

Response.json(data)
Response.json(data, options)

Parameter

data

Die JSON-Daten, die als Antwort-Body verwendet werden sollen.

options Optional

Ein Optionsobjekt, das Einstellungen für die Antwort enthält, einschließlich Statuscode, Statusmeldung und Header. Dies entspricht dem Optionsparameter des Response()-Konstruktors.

status: Der Statuscode für die Antwort, wie z. B. 200.
statusText: Die Statusmeldung, die mit dem Statuscode verknüpft ist. Bei einem Status von 200 könnte dies OK sein.
headers: Alle Header, die Sie Ihrer Antwort hinzufügen möchten, enthalten in einem Headers-Objekt oder Objektliteral von String-Schlüssel/Wert-Paaren (siehe HTTP-Header für eine Referenz).

Rückgabewert

Ein Response-Objekt.

Ausnahmen

TypeError: Wird ausgelöst, wenn data nicht in einen JSON-String konvertiert werden kann. Dies könnte passieren, wenn die Daten ein JavaScript-Objekt mit Methode oder einer zirkulären Referenz sind, oder wenn das übergebene Objekt undefined ist.

Beispiele

Antwort mit JSON-Daten

Dieses Live-Beispiel zeigt, wie Sie ein JSON-Antwortobjekt erstellen können, und protokolliert das neu erstellte Objekt zur Inspektion (der Protokollierungscode ist ausgeblendet, da er nicht relevant ist).

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

async function logResponse(response) {
  const responseText = await jsonResponse.text();
  log(`body: ${responseText}`);
  jsonResponse.headers.forEach((header) => log(`header: ${header}`));
  log(`status: ${jsonResponse.status}`);
  log(`statusText: ${jsonResponse.statusText}`);
  log(`type: ${jsonResponse.type}`);
  log(`url: ${jsonResponse.url}`);
  log(`ok: ${jsonResponse.ok}`);
  log(`redirected: ${jsonResponse.redirected}`);
  log(`bodyUsed: ${jsonResponse.bodyUsed}`);
}

Der untenstehende Code erstellt ein Response-Objekt mit JSON-Body { my: "data" } und Header, der auf application/json gesetzt ist.

const jsonResponse = Response.json({ my: "data" });
logResponse(jsonResponse);

Das Objekt hat die folgenden Eigenschaften. Beachten Sie, dass der Body und der Header wie erwartet gesetzt sind und der Standardstatus auf 200 gesetzt ist.

Antwort mit JSON-Daten und Optionen

Dieses Beispiel zeigt, wie Sie ein JSON-Antwortobjekt mit status- und statusText-Optionen erstellen können.

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

async function logResponse(response) {
  const responseText = await jsonResponse.text();
  log(`body: ${responseText}`);
  jsonResponse.headers.forEach((header) => log(`header: ${header}`));
  log(`status: ${jsonResponse.status}`);
  log(`statusText: ${jsonResponse.statusText}`);
  log(`type: ${jsonResponse.type}`);
  log(`url: ${jsonResponse.url}`);
  log(`ok: ${jsonResponse.ok}`);
  log(`redirected: ${jsonResponse.redirected}`);
  log(`bodyUsed: ${jsonResponse.bodyUsed}`);
}

Der untenstehende Code erstellt ein Response-Objekt mit JSON-Body { some: "data", more: "information" } und Header, der auf application/json gesetzt ist. Es setzt außerdem den Status auf 307 und setzt den entsprechenden Status-Text ("Temporary Redirect").

const jsonResponse = Response.json(
  { some: "data", more: "information" },
  { status: 307, statusText: "Temporary Redirect" },
);
logResponse(jsonResponse);

Das Objekt hat die folgenden Eigenschaften, die wie erwartet gesetzt sind. Beachten Sie, dass sich die ok-Eigenschaft der Antwort auf false ändert, da der Statuswert nicht im Bereich von 200 bis 299 liegt.

Spezifikationen

Specification
Fetch Standard # ref-for-dom-response-json①

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Service Worker API