JavaScript/Window/fetch

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Leer

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, so dass 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[Bearbeiten]

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

WindowOrWorkerGlobalScope[Bearbeiten]

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[Bearbeiten]

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()

Methods

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

Request[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]


Polyfill[Bearbeiten]