Javascript Fetch

Javascript fetch

Fetch führt einen XHR-Request zum Server aus und nutzt die Syntax von Javascript Promise mit dem Schlüsselwort then, um Aufgaben sequenziell und ohne verschachtelte Callbacks im Hintergrund auszuführen.

18-12-15 SITEMAP

Fetch Grundlagen

Der grundlegende XHR-Request sendet einen Request zum Server und liefert die Daten an die Anwendung. Javascript Fetch geht per se von der einfachsten Einstellung (GET) aus und führt diesen Request im Hintergrund ohne weiteren Code aus.

Fetch unterstützt Javascript Promise und vor allem das Schlüsselwort then.

XHR-Request mit Promise
const prettyPicture = () => {
	return new Promise ((resolves, rejects) => {
		const api = "fetch.json";
		const request = new XMLHttpRequest ();
		request.open ("GET", api);
		request.onload = () => {
			if (request.status === 200) {
				resolves (JSON.parse (request.response));
			} else {
				rejects (Error (request.statusText));
			}
		};
		request.onerror = err => rejects (err);
		request.send();
	});
};

prettyPicture ().then (
	picture => console.log (picture),
	err => console.error (
		new Error ("pretty Picture kann nicht geöffnet werden.")
	)
);
Fetch
const prettyPicture = () => 
	fetch ("fetch.json")
		.then (response => response.json ());

prettyPicture ()
	.then (console.log);

Fetch liefert das Ergebnis des Requests in einem Fetch-Objekt zurück. Sobald der Request ausgeführt und das Fetch-Objekt erzeugt ist, kann das Ergebnis asynchron mit einem Promise behandelt werden. Ein Javascript Promise enthält den Code, der anschließend sequentiell abgearbeitet werden soll. Das erspart so manch einen tiefen Abgrund von verschachtelten Callbacks.

Wo der klassische XHR-Code bei komplexen Request verschachtelte Anweisungen erfordert, bleibt der Fetch-Code linear von oben nach unten lesbar.

const getPictures = () => 
	fetch ("pictures.json")
		.then (response => response.json ());

const srcfile = () =>
	getPictures ()
		.then (json => json.pictures)
		.then (pictures => pictures.map (p => p.src))
		.then (names => names.join (", "))


srcfile ()
	.then (console.log);

getPictures liest die json-Datei mit den src-Daten von Bildern, dann Parsen der json-Daten, den Wert von src in ein Array mappen, dann die Array-Element durch Kommas trennen, das Ergebnis in der Konsole ausgeben.

JSON mit Javascript fetch einlesen

Wenn keine weiteren Optionen angegeben sind, ist fetch ein einfacher GET-Request und lädt den Inhalt von einer URL. Der Browser sendet den Request sofort und gibt ein Promise zurück.

Eine JSON-Datei ist einfaches Spiel für fetch. Ein leeres div-Tag wartet auf die fetch-Ladung.

JSON-Datei mit den Daten zu den Bildern
[
   {  "src":"schere.jpg",  
      "width":"600",  
      "height" : "322", 
      "alt" :"Die alte Schere" },
   {  "src":"pinsel.jpg",  
      "width":"600",  
      "height" : "322", 
      "alt" :"Pinsel und Farbe" },
…
]
Das Script
fetch ("imgdata.json").then (function (response) {
   return response.json();
}).then (function (data) {
   appendData (data);
}).catch (function (error) {
   console.log ("error: " + error);
});

function appendData (data) {
   const container = document.querySelector ("#container");
   for (let i=0; i<data.length; i++) {
      const div = document.createElement("div");
      div.innerHTML = "<img src='" + data[i].src + "' width='" + data[i].width + "' height='" + data[i].width + "'>";
      div.innerHTML += "<br><em>" + data[i].alt + "</em>";
      container.appendChild (div);
   }
}

Fetch Response

Response stellt Promise-basierte Methoden für den Zugriff in verschiedenen Formaten zur Verfügung.

response.text()
Response lesen und als Text zurückgeben
response.json()
Antwort als JSON parsen
response.formData()
Response als FormData-object zurückgeben
response.blob()
zurückgeben als Blob (Binärdaten mit type)
response.arrayBuffer()
zurückgeben als ArrayBuffer