Javascript JSON fetch async await

Javascript JSON Arrays

In Web-Anwendungen ist Javascript Fetch die bevorzugte Technik, um Daten vom Server anzugreifen. Fetch ist von Haus aus ein asynchroner Prozess, aber callback, promise und await async sind die drei Techniken für den synchronisierten Umgang mit fetch.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Fetch für den Zugriff auf Daten vom Server

Die auf einen Fetch-Request folgenden Anweisungen werden ohne Pausieren direkt ausgeführt und warten nicht auf den Lesevorgang. Async await ist eine relativ junge Syntax für die Behandlung von Promise. Mittels async await bekommt der Scriptcode einen synchronen Anstrich, der einfacher lesbar und verständlicher ist.

const response = await fetch(resource[, options]);

Der Aufruf fetch() setzt eine Anfrage in Gang und gibt ein Promise zurück. Wenn der Request abgeschlossen wird, wird das Promise mit der Antwort – dem Response-Objekt – aufgelöst. Kommt es unterwegs zu Problemen, wird das Promise abgewiesen.

async function fetchList() {
	const response = await fetch("books.json");
	const books = await response.json();
	return books;
}

fetchList ().then (books => {
	books;
	for (const b of books) {
		document.querySelector(".books").innerHTML += b.titel + "\n";
	}
})


		

Das Response-Objekt

response.json() ist eine Methode des Response-Objekts, die ein JSON-Objekt aus der Antwort zieht. Die Methode gibt ein Promise zurück, also muss await response.json() auf das JSON warten.

Das Response-Objekt hat mehr zu bieten als JSON – aber ebenso stets ein Promise.

response.json()
gibt ein JSON-Objekt zurück
response.text()
gibt reinen Text zurück
response.formData()
gibt FormData zurück
response.blob()
gibt ein Blob zurück (eine Art Datei-Objekt oder RAW-Daten)
response.arrayBuffer()()
gibt ein ArrayBuffer zurück (Binärdaten)

Fetch Error

Gäbe es die JSON-Datei books.json im Beispiel oben nicht, würde … nichts … passieren. Nichts – weder eine Fehlermeldung in der Console noch ein Fehler 404 oder ein Serverfehler.

Aus der Sicht von Fetch ist der HTTP-Request durchgeführt. Fertig. Nur wenn der Request nicht ausgeführt werden konnte, weil z.B. die Verbindung zum Server nicht hergestellt werden konnte.

Das altbekannte response.ok des HTTP-Requests trennt einen erfolgreichen on einem misslungenen HTTP-Request.

async function missingBooks () {
	const response = await fetch('/missing');
	if (!response.ok) {
		const message = `Voll daneben: ${response.status}`;
		throw new Error(message);
	}
	const books = await response.json();
	return books;
}

missingBooks().catch(error => {
	error.message;
});
Failed to load resource: the server responded with a status of 404 () /missing

Warten auf mehrere Requests

In vielen Situationen können Daten von mehr als einem Endpunkt erforderlich sein. await Promise.all([...]) setzt parallele Fetch-Requests in Gang und wartet, bis alle Anfragen erfüllt wurden.

async function fetchBooks () {
	const [books, titles] = await Promise.all(
		[
			fetch ("books.json"),
			fetch ("booktitles.json")
		]
	);
	
	const countUni = await books.json();
	const countAll = await titles.json();
	return [countUni, countAll];
}

fetchBooks ().then (([countUni, countAll]) => {
	countUni;
	countAll;
	console.log (countUni.length);
	console.log (countAll.length);
	
}).catch (error => {
	//
})