Window: fetch() Methode

Syntax

fetch(resource)
fetch(resource, options)

Parameter

resource

Dies definiert die Ressource, die Sie abrufen möchten. Dies kann entweder sein:

• Ein String oder ein anderes Objekt mit einem Stringifier — einschließlich eines URL-Objekts — das die URL der Ressource bietet, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, die im Fensterkontext die baseURI des Dokuments oder im Worker-Kontext die WorkerGlobalScope.location ist.
• Ein Request-Objekt.

options Optional

Ein RequestInit-Objekt, das benutzerdefinierte Einstellungen enthält, die Sie auf die Anfrage anwenden möchten.

Rückgabewert

Ein Promise, das sich in ein Response-Objekt auflöst.

Ausnahmen

AbortError DOMException

Die Anfrage wurde aufgrund eines Aufrufs der AbortController abort()-Methode abgebrochen.

NotAllowedError DOMException

Wird ausgelöst, wenn die Verwendung der Topics API durch eine browsing-topics Berechtigungsrichtlinie ausdrücklich untersagt ist, und eine fetch()-Anfrage mit browsingTopics: true gestellt wurde.

TypeError

Kann aus folgenden Gründen auftreten:

• Die angeforderte URL ist ungültig.
• Die angeforderte URL enthält Anmeldedaten (Benutzername und Passwort).
• Das als Wert von options übergebene RequestInit-Objekt enthielt Eigenschaften mit ungültigen Werten.
• Die Anfrage wird durch eine Berechtigungsrichtlinie blockiert.
• Es tritt ein Netzwerkfehler auf (z. B. weil das Gerät keine Verbindung hat).

Beispiele

In unserem Fetch Request Beispiel (siehe Fetch Request live) erstellen wir ein neues Request-Objekt mittels des entsprechenden Konstruktors und rufen es dann mit einem fetch()-Aufruf ab. Da wir ein Bild abrufen, führen wir Response.blob() auf der Antwort aus, um ihr den korrekten MIME-Typ zu geben, damit sie ordnungsgemäß behandelt wird, erstellen dann eine Objekt-URL davon und zeigen sie in einem <img>-Element an.

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

window
  .fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

In unserem Fetch Request mit init Beispiel (siehe Fetch Request init live) machen wir dasselbe, außer dass wir ein options-Objekt übergeben, wenn wir fetch() aufrufen. In diesem Fall können wir einen Cache-Control-Wert festlegen, um anzugeben, welche Art von zwischengespeicherten Antworten wir akzeptieren:

const myImage = document.querySelector("img");
const reqHeaders = new Headers();

// A cached response is okay unless it's more than a week old
reqHeaders.set("Cache-Control", "max-age=604800");

const options = {
  headers: reqHeaders,
};

// Pass init as an "options" object with our headers.
const req = new Request("flowers.jpg", options);

fetch(req).then((response) => {
  // …
});

Sie könnten das init-Objekt auch mit dem Request-Konstruktor übergeben, um denselben Effekt zu erzielen:

const req = new Request("flowers.jpg", options);

Sie können auch ein Objektliteral als headers in init verwenden:

const options = {
  headers: {
    "Cache-Control": "max-age=60480",
  },
};

const req = new Request("flowers.jpg", options);

Der Artikel Using fetch bietet weitere Beispiele zur Verwendung von fetch().

Spezifikationen

Browser-Kompatibilität

Siehe auch

• WorkerGlobalScope.fetch()
• Fetch API
• ServiceWorker API
• HTTP-Zugriffskontrolle (CORS)
• HTTP