Javascript fetch head

Fetch Head

Ein Request oder eine Anfrage mittels JS fetch kann einzelne HTTP-Header-Felder übermitteln, ohne dabei auf eine serverseitige Anwendung zurückzugreifen.

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

Fetch: HTTP-Header-Felder lesen

Die meisten Dokumentationen erwähnen nur GET und POST, aber fetch holt mit HEAD kurz und bündig Informationen.

Per Vorgabe nutzt fetch ein GET für den Zugriff auf Resourcen, aber fetch unterstützt weitere Methoden wie POST und HEAD. HEAD-Requests funktionieren wie ein GET-Request, bei dem der body der Antwort leer bleibt.

Datei-Typ und Datei-Größe mit fetch abrufen

Ohne den Beistand einer serverseitigen Anwendung und XMLHttpRequest holt fetch Informationen über eine Datei – z.B. die Dateigröße von PDF-Dateien, Zip-Archiven und Bildern, sowie Last Modified, das Datum der letzten Änderung.


			
statue-benrath-300
statue-bruehl-300
statue-heimholz-300
function fetchhead (path) {

	fetch(path, {method: 'HEAD'})
	.then ( function(response) {
		let contenttype = response.headers.get("content-type");
		let contentsize = response.headers.get("content-length");
		let lastmodified = response.headers.get("Last-Modified");
		document.querySelector(".result").textContent += " Dateigröße " + contentsize;
		
	}).catch (
		function(error) {
		console.log('Da haben wir ein Problem: \n', error);
	});
}

Mehr zu HTTP-Header-Feldern: Liste der HTTP-Headerfelder

Die Abmessungen von Bilddateien werden nicht als HTTP-Headerfeld geladen. Da muss Javascript weiterhin zu naturalWidth und naturalHeight greifen. Die Dateigröße allerdings ist interessant für PDF-Dateien, wenn der Benutzer im Voraus vor der Größe der Datei informiert werden soll.