Response: json() statische Methode

Die json() statische Methode des Response-Interfaces gibt ein Response zurück, welches die bereitgestellten JSON-Daten als Body enthält, sowie ein Content-Type-Header, der auf application/json gesetzt ist. Der Status der Antwort, die Statusnachricht und zusätzliche Header können ebenfalls gesetzt werden.

Die Methode erleichtert die Erstellung von Response-Objekten, um JSON-codierte Daten zurückzugeben. Service Workers beispielsweise fangen Fetch-Anfragen eines Browsers ab und könnten json() verwenden, um ein Response aus zwischengespeicherten JSON-Daten zu erstellen, das an den Hauptthread zurückgegeben wird. Die json()-Methode kann auch im Server-Code verwendet werden, um JSON-Daten für Single Page Applications und andere 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 Antwortkörper verwendet werden sollen.

options Optional

Ein Optionen-Objekt mit Einstellungen für die Antwort, einschließlich des Statuscodes, der Statusnachricht und der Header. Dies entspricht dem Optionen-Parameter des Response()-Konstruktors.

status

Der Statuscode für die Antwort, z. B. 200.

statusText

Die Statusnachricht, die mit dem Statuscode verknüpft ist. Für einen Status von 200 könnte dies OK sein.

headers

Beliebige Header, die Sie Ihrer Antwort hinzufügen möchten, enthalten in einem Headers-Objekt oder einem Objektliterar 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 umgewandelt werden kann. Dies könnte passieren, wenn die Daten ein JavaScript-Objekt mit einer Methode sind, oder das eine zyklische Referenz 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 response.text();
 log(`body: ${responseText}`);
 response.headers.forEach((header) => log(`header: ${header}`));
 log(`status: ${response.status}`);
 log(`statusText: ${response.statusText}`);
 log(`type: ${response.type}`);
 log(`url: ${response.url}`);
 log(`ok: ${response.ok}`);
 log(`redirected: ${response.redirected}`);
 log(`bodyUsed: ${response.bodyUsed}`);
}

Der folgende 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 folgende 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 response.text();
 log(`body: ${responseText}`);
 response.headers.forEach((header) => log(`header: ${header}`));
 log(`status: ${response.status}`);
 log(`statusText: ${response.statusText}`);
 log(`type: ${response.type}`);
 log(`url: ${response.url}`);
 log(`ok: ${response.ok}`);
 log(`redirected: ${response.redirected}`);
 log(`bodyUsed: ${response.bodyUsed}`);
}

Der folgende 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 sich die ok-Eigenschaft der Antwort zu false ändert, da der Statuswert nicht im Bereich von 200 bis 299 liegt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Service Worker API