Window: fetch() Methode - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Window: fetch() Methode

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2017 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die fetch()-Methode des Window-Interfaces startet den Prozess des Abrufens einer Ressource aus dem Netzwerk und gibt ein Promise zurück, das erfüllt wird, sobald die Antwort verfügbar ist.

Das Promise wird mit dem Response-Objekt, das die Antwort auf Ihre Anfrage darstellt, aufgelöst.

Ein fetch()-Promise wird nur abgelehnt, wenn die Anfrage fehlschlägt, zum Beispiel aufgrund einer fehlerhaft formulierten Anforderungs-URL oder eines Netzwerkfehlers. Ein fetch()-Promise wird nicht abgelehnt, wenn der Server mit HTTP-Statuscodes antwortet, die Fehler anzeigen (404, 504 usw.). Stattdessen muss ein then()-Handler die Eigenschaften Response.ok und/oder Response.status überprüfen.

Die fetch()-Methode wird durch die connect-src-Direktive der Content Security Policy gesteuert, anstatt durch die Direktive der Ressourcen, die sie abruft.

Hinweis: Die Parameter der fetch()-Methode sind identisch mit denen des Request()-Konstruktors.

In diesem Artikel

Syntax

js
fetch(resource)
fetch(resource, options)

Parameter

resource

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

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

options Optional

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

Rückgabewert

Ein Promise, das zu einem Response-Objekt führt.

Ausnahmen

AbortError DOMException

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

NotAllowedError DOMException

Wird ausgelöst, wenn:

Die Nutzung der Topics API durch eine spezielle browsing-topics Permissions Policy explizit verboten ist und browsingTopics auf true gesetzt ist.
Die Nutzung von Private State Token API-Operationen durch eine spezielle private-state-token-issuance oder private-state-token-redemption Permissions Policy explizit verboten ist und die privateToken-Option spezifiziert ist, einschließlich eines verbotenen privateToken.operation-Typs.

TypeError

Kann aus folgenden Gründen auftreten:

Die angeforderte URL ist ungültig.
Die angeforderte URL enthält Anmeldedaten (Benutzername und Passwort).
Das RequestInit-Objekt, das als Wert von options übergeben wurde, enthielt Eigenschaften mit ungültigen Werten.
Die Anfrage wird durch eine Berechtigungspolicy blockiert.
Es liegt ein Netzwerkfehler vor (zum Beispiel, weil das Gerät keine Verbindung hat).
Die privateToken-Init-Option ist spezifiziert, einschließlich eines privateToken.operation-Typs von send-redemption-record, und das privateToken.issues-Array war leer oder nicht gesetzt, oder einer oder mehrere der angegebenen issuers sind keine vertrauenswürdigen HTTPS-URLs.

Beispiele

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

js
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 with init Beispiel (siehe Fetch Request init live) tun 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:

js
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 zusammen mit dem Request-Konstruktor übergeben, um denselben Effekt zu erzielen:

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

Sie können auch ein Objektliterale als headers in init nutzen:

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

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

Der Artikel Using fetch bietet weitere Beispiele für die Verwendung von fetch().

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden