Response: Methode json()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 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 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
| Specification |
|---|
| Fetch # ref-for-dom-body-json① |
Browser-Kompatibilität
Loading…