Response: json() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die json()-Methode des Response-Interfaces nimmt einen Response-Stream und liest ihn vollständig aus. Sie gibt ein Promise zurück, das mit dem Ergebnis der Verarbeitung des Body-Inhalts als JSON aufgelöst wird.

Beachten Sie, dass das Ergebnis, trotz der Bezeichnung der Methode als json(), kein JSON ist, sondern das Ergebnis, das durch die Verarbeitung von JSON als Eingabe entsteht und ein JavaScript-Objekt erzeugt.

Syntax

json()

Parameter

Keine.

Rückgabewert

Ein Promise, das in ein JavaScript-Objekt aufgelöst wird. Dieses Objekt kann alles sein, was durch JSON dargestellt werden kann – ein Objekt, ein Array, ein String, eine Zahl…

Ausnahmen

DOMException AbortError

Die Anfrage wurde abgebrochen.

TypeError

Wird aus einem der folgenden Gründe ausgelöst:

Der Antwortkörper ist gestört oder gesperrt.
Es gab einen Fehler beim Dekodieren des Body-Inhalts (zum Beispiel, weil der Content-Encoding-Header falsch ist).

SyntaxError

Der Antwortkörper kann nicht als JSON geparst werden.

Beispiele

In unserem fetch JSON Beispiel (laufen Sie fetch JSON live), erstellen wir eine neue Anfrage mit dem Request()-Konstruktor und verwenden sie, um eine .json-Datei abzurufen. Wenn der Abruf erfolgreich ist, lesen und parsen wir die Daten mit json(), extrahieren anschließend die erwarteten Werte aus den resultierenden Objekten und fügen sie als Listenelemente ein, um unsere Produktdaten anzuzeigen.

const myList = document.querySelector("ul");
const myRequest = new Request("products.json");

fetch(myRequest)
  .then((response) => response.json())
  .then((data) => {
    for (const product of data.products) {
      const listItem = document.createElement("li");
      listItem.appendChild(document.createElement("strong")).textContent =
        product.Name;
      listItem.append(` can be found in ${product.Location}. Cost: `);
      listItem.appendChild(document.createElement("strong")).textContent =
        `£${product.Price}`;
      myList.appendChild(listItem);
    }
  })
  .catch(console.error);

Spezifikationen

Specification
Fetch # ref-for-dom-body-json①