Javascript Fetch

WebGL 3d für Webseiten

Fetch führt einen XHR-Request zum Server aus und nutzt die Syntax von Javascript Promise mit dem Schlüsselwort then, um Aufgaben sequenziell und ohne verschachtelte Callbacks im Hintergrund auszuführen.

18-12-15 SITEMAP

Fetch Grundlagen

Der grundlegende XHR-Request sendet einen Request zum Server und liefert die Daten an die Anwendung. Javascript Fetch geht per se von den einfachsten Einstellungen (GET) aus und führt diesen Request im Hintergrund ohne weiteren Code aus.

Einfacher XHR-Request
const request = new XMLHttpRequest();
request.onreadystatechange = responseMethod;
request.open ("GET", https://seite.de);
request.send();
Fetch
Fetch(https://seite.de).then (function (response)) {
    responseMethod(response);
}

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 wie 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. Fetch adaptiert die Javascript Promise-Syntax und vor allem das Schlüsselwort then.

Wo der klassische XHR-Code bei komplexen Request verschachtelte Anweisungen erfordert, bleibt der Fetch-Code linear von oben nach unten lesbar.

fetch ("imgdata.json").then (function (response) {
   return response.json();
}).then (function (data) {
   appendData (data);
}).catch (function (error) {
   console.log ("error: " + error);
});

fetch gibt ein Javascript Promise zurück.

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.

JSON-Datei mit den Daten zu den Bildern
[
   {  "src":"schere.jpg",  
      "width":"600",  
      "height" : "322", 
      "alt" :"Die alte Schere" },
   {  "src":"pinsel.jpg",  
      "width":"600",  
      "height" : "322", 
      "alt" :"Pinsel und Farbe" },
…
]
Das Script
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 (let i=0; i<data.length; i++) {
      const div = document.createElement("div");
      div.innerHTML = "<img src='" + data[i].src + "' width='" + data[i].width + "' height='" + data[i].width + "'>";
      div.innerHTML += "<br><em>" + data[i].alt + "</em>";
      container.appendChild (div);
   }
}

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