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