Fetch: HTTP-Header-Felder lesen
Die meisten Dokumentationen erwähnen nur GET, POST, PUT und DELETE, aber fetch holt mit HEAD kurz und bündig Informationen. 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.
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 ist z.B. interessant für PDF-Dateien, wenn der Benutzer im Voraus vor der Größe der Datei informiert werden soll.
