Response: Methode json()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2017 browserübergreifend verfügbar.
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 des Parsens des Textkörpers als JSON aufgelöst wird.
Beachten Sie, dass das Ergebnis trotz des Namens der Methode json() kein JSON ist, sondern das Ergebnis des Parsens der JSON-Eingabe, um ein JavaScript-Objekt zu erzeugen.
Syntax
json()
Parameter
Keine.
Rückgabewert
Ein Promise, das sich zu einem JavaScript-Objekt auflöst. Dieses Objekt kann
alles sein, was durch JSON dargestellt werden kann – ein Objekt, ein Array, ein String, eine Zahl…
Ausnahmen
AbortErrorDOMException-
Die Anfrage wurde abgebrochen.
TypeError-
Wirft eine der folgenden Gründe:
- Der Antwortkörper ist gestört oder gesperrt.
- Es gab einen Fehler beim Dekodieren des Körperinhalts (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 (ausführen fetch JSON live),
erstellen wir eine neue Anfrage mit dem Request()-Konstruktor und verwenden es dann, um eine .json-Datei abzurufen.
Wenn das Abrufen erfolgreich ist, lesen und parsen wir die Daten mit json(), lesen
die Werte aus den resultierenden Objekten wie erwartet heraus 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
| Spezifikation |
|---|
| Fetch # ref-for-dom-body-json① |