Window: fetch() Methode

Syntax

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.

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:

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:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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