Javascript Fetch

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.

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.")
	)
);

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.

[
   {  "src":"schere.jpg",  
      "width":"600",  
      "height" : "322", 
      "alt" :"Die alte Schere" },
   {  "src":"pinsel.jpg",  
      "width":"600",  
      "height" : "322", 
      "alt" :"Pinsel und Farbe" },
…
]

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);
   }
}

Textdateien mit fetch laden

Der überwiegende Anteil der Anfragen nach externen Dateien richtet sich an JSON, aber fetch liest ebenso Textdateien, z.B. CSV-Dateien (comma-separated-values).

fetch('bestellungen.csv')
	.then(response => response.text())
	.then(text => verarbeitung(text))

async function requestCSV() {
	const res = await fetch('bestellungen.csv');
	if (res.ok) {
		let data = await res.text();
		return data;
	} else {
		return `HTTP error: ${res.status}`;
	}
}

requestCSV().then(data => {	
	verarbeitung(data)
});

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