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: Dieses Feature ist verfügbar in Web Workers.
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
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:
- Der Antwortkörper ist gestört oder gesperrt.
- Es gab einen Fehler beim Dekodieren des Rumpfinhalts (zum Beispiel, weil der
Content-Encoding
Header falsch ist).
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.
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