JavaScript/WindowOrWorkerGlobalScope/fetch

Mit der window.fetch-Methode und der neuen Fetch API erhalten Sie eine bequemere Alternative zu XMLHttpRequest, mit der Sie Daten aus anderen Dateien / vom Server holen (engl.: fetch) können.

Details: caniuse.com

Fetch abstrahiert die Hauptkomponenten von HTTP als JavaScript-Objekte und soll dadurch den Zugriff darauf einfacher gestalten. Um der asynchronen Natur von HTTP-Requests gerecht zu werden, ist Fetch vollständig auf Promises aufgebaut.

Die grundlegenden Interfaces, auf denen das Fetch-API aufbaut, ist WindowOrWorkerGlobalScope mit der fetch-Methode. Dazu kommen die Interfaces Headers, Request und Response sowie Body, um die Komponenten eines HTTP-Zugriffs zu repräsentieren. Konzepte wie CORS werden automatisch behandelt.

Request- und Response-Objekte kann man direkt mit den jeweiligen Konstruktoren erzeugen, aber das ist nur in Ausnahmefällen notwendig. Normalerweise bekommt man sie von andere API Funktionen.

Um einen Request zum Laden einer Ressource zu starten, verwendet man die fetch()-Methode. Das WindowOrWorkerGlobalScope Interface steht als Mixin für das Window-Objekt und WorkerGlobalScope bereit, fetch() ist dadurch für den GUI Thread als auch für Web Worker verfügbar. fetch() hat ein Pflichtargument: den Pfad zu der Ressource, die beschafft werden soll. Zurückgegeben wird ein Promise, das zu der Response zu diesem Request aufgelöst wird – ob nun erfolgreich oder nicht. Optional kann fetch() ein Objekt mit Initialisierungsoptionen für den Request übergeben werden.

Sobald die Response zur Verfügung steht, gibt es mehrere Eigenschaften und Methoden, um sie weiterzuverarbeiten. Die Methoden, die den Response-Body auslesen, liefern ihrerseits wieder ein Promise zurück, sodass ein typischer fetch-Aufruf aus zwei .then() Schritten besteht:

Beispiel

fetch('kurse.php')
.then(function(response) {
  if (response.ok)
    return response.json();
  else
    throw new Error('Kurse konnten nicht geladen werden');
})
.then(function(json) {
  // Hier Code zum einarbeiten der Kurse in die Anzeige
})
.catch(function(err) {
  // Hier Fehlerbehandlung
});

Interfaces

Die folgenden Abschnitte werden noch in eigene SELF-Wiki-Artikel ausgelagert und stellen zur Zeit einen Stub dar.

WindowOrWorkerGlobalScope

WindowOrWorkerGlobalScope (früher GlobalFetch genannt) ist ein Mixin des Fetch API, das von den Window und WorkerGlobalScope Interfaces implementiert wird. fetch()-Aufrufe stehen damit sowohl für den JavaScript GUI Thread als auch für Web Worker zur Verfügung.

• WindowOrWorkerGlobalScope.fetch()

Headers

Ein Headers-Objekt kann man über die headers-Eigenschaft von Request- oder Response-Objekten des Fetch API erhalten, oder über die Headers() Konstruktorfunktion erzeugen.

Ein Headers-Objekt verfügt über eine Guard-Eigenschaft. Als Anwender kann man diese Eigenschaft weder lesen noch ändern, aber sie beeinflusst, welche Header man setzen darf. Festgelegt wird sie beim Erzeugen des Headers-Objekts.

Erzeugt	Guard	Erlaubte Header
Headers Konstruktor	none	alle
Request Konstruktor	request	alle, bis auf verbotene Request-Header
Request Konstruktor mit mode=no-cors	request	nur die Header der CORS Safelist (simple headers)
Response Konstruktor	response	alle, bis auf verbotene Response-Header
error() oder redirect() Methoden	immutable	keine. Änderungsversuche mit set(), append() oder delete() werfen einen TypeError

Listen der verbotenen bzw. CORS-Safelisted Header finden sich in der Fetch Spezifikation.

Constructor

• Headers()

Methoden

• Headers.append()
• Headers.delete()
• Headers.get()
• Headers.getAll()
• Headers.has()
• Headers.set()

Request

Anforderung von Daten

Constructor

• Request()

Eigenschaften

• Body.bodyUsed
• Request.cache
• Request.context
• Request.credentials
• Request.headers
• Request.method
• Request.mode
• Request.referrer
• Request.url

Methoden

• Body.arrayBuffer()
• Body.blob()
• Request.clone()
• Body.formData()
• Body.json()
• Body.text()

Response

Antworten

Constructor

• Response()

Eigenschaften

• Body.bodyUsed
• Response.headers
• Response.ok
• Response.status
• Response.statusText
• Response.type
• Response.url
• Response.useFinalURL

Methoden

• Body.arrayBuffer()
• Body.blob()
• Response.clone()
• Response.error()
• Body.formData()
• Body.json()
• Response.redirect()
• Body.text()

Weblinks

• google.developers: Introduction to fetch()
• MDN: Fetch API
• Jake Archibald: That's so fetch!

Polyfill

• github: fetch