Javascript Fetch

Fetch Grundlagen

Javascript Fetch geht per se von der einfachsten Einstellung einer Anfrage aus (GET) und arbeitet diesen Request im Hintergrund ohne weiteren Code ab.

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 erforderte, 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); 

// oder 

srcfile ()
	.then (names => document.querySelector (".result").innerHTML = names);

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,
dann das Ergebnis in der Konsole ausgeben.

Kling logisch.

Mit dem Auftritt des fetch-APIs hat der XMLHttpRequest an Bedeutung verloren, aber ein paar Resorts sind geblieben:

• Der XHR unterstützt synchrones Abrufen der Daten (z.B. wenn Aktionen in einer bestimmten Reihenfolge ausgeführt werden sollen),
• XMLHTTPRequest unterstützt die Fortschrittsanzeige bei Datei-Uploads (HTML progress), was mit dem fetch-API umständlicher ist.

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 (const item of data) {
		const div = document.createElement("div");
		div.innerHTML = `<img loading="lazy" src="${item.src}" width="${item.width}" height="${item.height}">`;
		div.innerHTML += `<br><em>${item.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)
});

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 {
    	// Pfad zur Textdatei
        const response = await fetch('fetch-html.html'); 
        if (!response.ok) {
            throw new Error('Kein OK vom Netzwerk');
        }
        // Textinhalt aus der Antwort extrahieren
        const text = await response.text(); 
		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.

Datei mit fetch asynchron laden

Eine Datei (hier eine SVG-Grafik) asynchron mit fetch vom Server in die Seite laden:

<figure id="svg-container"></figure>

async function loadSVG(url) {
  try {
    const response = await fetch(url);

    // Anforderung erfolgreich?
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const svgText = await response.text();

    document.getElementById('svg-container').innerHTML = svgText;
  } catch (error) {
    console.error('Fehler beim Laden der SVG:', error);
  }
}

loadSVG('prototype.svg');

Die Funktion loadSVG() lädt die Grafik und wirft eine Fehlermeldung aus, wenn die Datei nicht geladen werden kann (if (!response.ok)). Wenn die Grafik geladen ist, hängt document.querySelector('#svg-container') die Grafik in das Element mit der id svg-container ein.

Die Elemente der Grafik sind DOM-Elemente und können z.B. mit const text = document.querySelectorAll ("#svg-container text") manipuliert werden.

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

API – Web Application Interface

• Fetch API
• Geolocation API
• Canvas API
• Web Storage API
• Intersection Observer API
• Web Workers API
• File API
• Clipboard API