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.

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

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

Fetch: HTTP-Header-Felder lesen

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.