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.
(dpe)
Wie hilfreich war dieser Beitrag?
Klicke auf die Sterne um zu bewerten!
Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0
Eine Antwort zu „Fetch-API: Einfaches Laden von Inhalten ohne XMLHttpRequest“
— was ist Deine Meinung?
Haha, ich lese die ganze Zeit den Artikel und frage mich, na wie siehts da wohl mit dem Browsersupport aus, um dann am Ende zu lesen: Nicht so gut :/ Aber wie immer bei Javascript, das wird schon.
So müssen wir uns weiterhin mit dem XMLHTTPREQUEST rumschlagen, beziehungsweise auf jQuery ausweichen, was die meisten wohl machen werden. Selbst mit der fetch().then()-Methodik ist jQuery.post(), ajax() und get() doch relativ einfacher zu handeln.
Eine schöne Methode außerhalb von jQuery sollte es aber wirklich geben, denn nicht immer will man sich den ganzen Overload geben nur wegen einer kurzen Ajax-Abfrage.