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.

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

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

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

Asynchroner Aufruf
fetch('bestellungen.csv')
	.then(response => response.text())
	.then(text => verarbeitung(text))
Async Await
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)
});

HTML- und XML-Dateien mit fetch lesen

Auch HTML-Dateien sind erst einmal Textdateien, also liest JavaScript auch ohne Weiteres HTML-Dateien mitsamt head und body ein, interpretiert sie aber auch nur als String.

Erst die Methode parseFromString () des DOMParser parst den String und gibt ein HTMLDocument oder XMLDocument zurück, auf dem JavaScript die Methoden des Document Object Modell anwenden und auf seine Eigenschaften kann.

async function readText() {
    try {
        const response = await fetch('fetch-html.html'); // Pfad zur Textdatei
        if (!response.ok) {
            throw new Error('Kein OK vom Netzwerk');
        }
        const text = await response.text(); // Textinhalt aus der Antwort extrahieren
		document.querySelector ("#res").append (text);
		
		const parser = new DOMParser (), 
							 htmlDoc = parser.parseFromString (text, "text/html");

		const section = htmlDoc.querySelector ("section");
        document.querySelector ("#htmlres").append (section);
    } catch (error) {
        console.error('Error fetching text:', error);
    }
}

readText ();

parseFromString () hat zwei Argumente: den String text und den Mime-Typ:

  • text/html
  • text/xml
  • application/xml
  • application/xhtml+xml
  • image/svg+xml

Die Methode schließt script-Elemente aus und markiert sie als nicht ausführbar.

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