Antwort: `json()` statische Methode

Syntax

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

Parameter

data

Die JSON-Daten, die als Antwortbody verwendet werden sollen.

options Optional

Ein Optionsobjekt, das Einstellungen für die Antwort enthält, einschließlich des Statuscodes, des Statustexts und der Header. Dies ist dasselbe wie der Optionsparameter des Response() Konstruktors.

status

Der Statuscode für die Antwort, wie zum Beispiel 200.

statusText

Die Statusnachricht, die mit dem Statuscode verbunden ist. Bei einem Status von 200 könnte dies OK sein.

headers

Alle Header, die Sie Ihrer Antwort hinzufügen möchten, innerhalb eines Headers Objekts oder eines Objektliterals von String Schlüssel/Wert-Paaren enthalten (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 Methoden sind, das einen Zirkularverweis hat, 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 dass 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 auch 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 die ok Eigenschaft der Antwort auf false geändert wurde, da der Statuswert nicht im Bereich von 200 bis 299 liegt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Service Worker API