Fetch-API: Einfaches Laden von Inhalten ohne XMLHttpRequest

Komplexe Web-Applikationen setzen zunehmend auf JavaScript. Dabei werden auch Inhalte immer häufiger per JavaScript geladen. Bislang erfolgte dies über ein XMLHttpRequest-Objekt, was aber immer vergleichsweise umständlich war. So sind hierzu die Methoden open() und send() notwendig, um Inhalte zu laden. Per Callback-Funktion, die über einen Event-Listener aufgerufen wird, können die Inhalte dann abgerufen werden. Die neue Fetch-API vereinfacht das Laden von Inhalten deutlich.

Laden mit fetch() und then()

Nicht immer sind die umfangreichen Möglichkeiten von XMLHttpRequest notwendig. Gerade, wenn es darum geht, ein JSON-Objekt oder einen einfachen Text aus einer Datei zu laden, war das XMLHttpRequest-Objekt immer schon überdimensioniert. Dennoch gab es keine Alternative dazu.

var beispiel = new XMLHttpRequest();
beispiel.open("GET", "beispiel.txt", true);
beispiel.send();
beispiel.addEventListener("readystatechange", function () {
  if (this.readyState == 4) {
    console.log(this.responseText);
  }
}, false);

Das Beispiel zeigt das recht umständliche Verfahren, um eine einfache Textdatei zu laden und deren Inhalt in der Konsole auszugeben. Während per open() die Art und URL des Requests definiert wird, wird er über send() ausgeführt. Per addEventListener() wird auf die Antwort des Servers gewartet und per readyState wird der Status des Request abgefragt. Wird der Statuscode 4 ausgegeben, war der Request erfolgreich und der Inhalt wird per responseText ausgegeben.

Die neue Fetch-API hat einen anderen Ansatz. Anders als XMLHttpRequest ist die Fetch-API in erster Linie für das Empfangen von Inhalten gedacht. Darüber hinaus kommt die Fetch-API ohne Event-Listener aus. Stattdessen werden sogenannte Promises verwendet, um die Inhalte nach erfolgreichem Request auszulesen.

Während man also per fetch()-Methode beispielsweise eine einfache Textdatei oder ein JSON-Objekt lädt, wird mit der Promise-Methode then() die Antwort des Requests verarbeitet.

fetch("beispiel.txt").then(
  function (antwort) {
    return antwort.text();
  }
).then(
  function (text) {
    console.log(text);
  }
);

Das Beispiel zeigt, wie die fetch()-Methode zusammen mit Promises – also der then()-Methode – funktioniert. Per fetch() wird zunächst der Request abgesetzt. Im Beispiel wird eine einfache Textdatei aufgerufen. War die Methode erfolgreich, wird per then() eine Funktion ausgeführt. Dieser wird die Antwort des Requests übergeben. Die Antwort ist in diesem Fall der Inhalt der Textdatei beispiel.txt. Per text() wird die Antwort als reiner Text bereitgestellt und ausgegeben.

Es folgt eine zweite then()-Methode, die dann ausgeführt wird, wenn die Bereitstellung der Antwort als Text erfolgreich war. Diese zweite then()-Methode gibt letztendlich den Text in die Konsole aus.

Alternativ ist es auch möglich, ein JSON-Objekt per Fetch-API auszulesen. Hierbei wird der Funktion der ersten then()-Methode die Antwort des Requests als JSON bereitgestellt.

fetch("beispiel.json").then(
  function (antwort) {
    return antwort.json();
  }
).then(
  function (json) {
    console.log(json["beispiel"]);
  }
);

Über die zweite then()-Methode erhält man im Beispiel den Zugriff auf das JSON-Objekt. Hier wird der Wert der JSON-Eigenschaft beispiel in die Konsole geschrieben.

Metadaten des Fetch-Requests auslesen

Jeder Fetch-Request besitzt eine Reihe von Metadaten, die ausgelesen werden können. Dazu gehören die Eigenschaften status, statusText, url und type.

fetch("beispiel.json").then(
  function (antwort) {
    console.log(antwort.status);
    console.log(antwort.statusText);
    console.log(antwort.url);
    console.log(antwort.type);
  }
)

Die Eigenschaft status gibt den HTTP-Statuscode wieder. Wird die per fetch()-Methode aufgerufene Datei erfolgreich geladen, wird 200 zurückgegeben. Nur in diesem Fall würde auch ein etwaiger zweiter Promise – also eine zweite then()-Methode – ausgeführt. Die Eigenschaft statusText gibt den HTTP-Status als Text zurück, im Erfolgsfall also OK.

Die Eigenschaft url hingegen gibt die in der fetch()-Methode angegebene URL aus. Als Letztes exisitiert noch die Eigenschaft type, welche darüber informiert, woher der Request stammt. Wird der Wert basic ermittelt, stammt der Request von derselben Domain. Der Wert cors siganlisiert, dass die Antwort von einer fremden Domain stammt, welche im Rahmen des Cross-Origin-Resource-Sharings (CORS) jedoch den Zugriff durch den Server, der den Request abgesetzt hat, erlaubt.

Als letzter möglicher Wert für status kann opaque existieren. Dies bedeutet, dass die Antwort von einer fremden Domain kommt, die keine Berechtigung für das Cross-Origin-Resource-Sharing erteilt hat. Der Inhalt kann dementsprechend nicht gezeigt werden.

Außerdem hat man per headers.get() die Möglichkeit, jeden einzelnen HTTP-Header der Antwort auszulesen.

console.log(antwort.headers.get("Content-Type"));

Im Beispiel wird der Header Content-Type ausgelesen und in die Konsole geschrieben.

Eigenschaften für fetch()-Aufruf definieren

Über einen Aufruf der Fetch-API lassen sich auch diverse Eigenschaften festlegen. Diese werden in Form eines Literalobjekts als zweiter Parameter der fetch()-Methode hinzugefügt. So kann man beispielsweise den Modus des Requests festlegen. Über mode bestimmt man, ob der Request ausschließlich im Rahmen der Same-Origin-Policy von derselben Domain zugelassen werden (same-origin) oder ob auch Fremddomains erlaubt sein sollen, sofern sie im Rahmen des Cross-Origin-Resource-Sharings den Zugriff zulassen.

fetch("http://example.com/beispiel.json", {
  mode: "cors"
}).then(
  …
)

Im Beispiel wird der Modus auf cors gesetzt. Es werden also fremde Domains zugelassen.

POST-Request absetzen

Neben dem einfachen Laden von Inhalten erlaubt die Fetch-API auch das Absetzen von POST-Requests. Über die Eigenschaft method kann die fetch()-Methode einen POST-Request initiieren. Über die Eigenschaft body überträgt man Inhalte. So hat man die Möglichkeit, dem Request Parameter mitzugeben und kann die Antwort des Requests je nach übergebenem Parameter beeinflussen.

fetch("beispiel.json", {
  mode: "cors",
  method: "post",
  body: "seite=kontakt&benutzer=hans",
  headers: {
    "Content-Type": "text/plain"
  }
}).then(
  …
)

Im Beispiel werden per body Parameter mit dem Request übergeben. Zusätzlich ist es möglich, HTTP-Header anzugeben. Im Beispiel wird der Content-Type definiert.

Browser-Support

Da die Fetch-API noch recht neu ist, können noch nicht alle Browser etwas mit ihr anfangen. Derzeit wird sie nur von Chrome ab Version 42 unterstützt. Firefox wird sie ab Version 39 unterstützen. Für den Internet Explorer und Safari ist derzeit keine geplante Unterstützung bekannt. Daher ist die Fetch-API zum jetzigen Zeitpunkt für den produktiven Einsatz noch nicht geeignet.