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 der Response-Schnittstelle nimmt einen Response-Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, das mit dem Ergebnis der Analyse des Rumpftexts als JSON aufgelöst wird.

Beachten Sie, dass der Name der Methode json() zwar auf JSON hinweist, das Ergebnis jedoch kein JSON ist, sondern das Resultat der Analyse von JSON-Eingaben, um ein JavaScript-Objekt zu erzeugen.

Syntax

js
json()

Parameter

Keine.

Rückgabewert

Ein Promise, das zu einem 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

Ausgelöst aus einem der folgenden Gründe:

SyntaxError

Der Antwortkörper kann nicht als JSON analysiert werden.

Beispiele

In unserem fetch JSON Beispiel (führen Sie fetch JSON live aus), erstellen wir eine neue Anfrage mit dem Request()-Konstruktor und verwenden diese, um eine .json-Datei abzurufen. Wenn das Abrufen erfolgreich ist, lesen und analysieren wir die Daten mit json(), lesen dann die Werte aus den resultierenden Objekten aus, wie Sie es erwarten würden, und fügen sie in Listenelemente ein, um unsere Produktdaten anzuzeigen.

js
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 Standard
# ref-for-dom-body-json①

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch