Window: fetch()-Methode

resource

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

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

options Optional

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

Ein Promise, das auf ein Response-Objekt aufgelöst wird.

AbortError DOMException

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

NotAllowedError DOMException

Wird ausgelöst, wenn die Nutzung der Topics API explizit von einer browsing-topics Permissions Policy untersagt wird und eine fetch()-Anfrage mit browsingTopics: true gestellt wurde.

TypeError

Kann aus folgenden Gründen auftreten:

// Leerzeichen in "C ontent-Type"
const headers = {
  "C ontent-Type": "text/xml",
  "Breaking-Bad": "<3",
};
fetch("https://example.com/", { headers });
        

const headers = [
  ["Content-Type", "text/html", "extra"],
  ["Accept"],
];
fetch("https://example.com/", { headers });
        

fetch("blob://example.com/", { mode: "cors" });
        

fetch("https://user:[email protected]/");
      

fetch("https://example.com/", { referrer: "./abc\u0000df" });
        

fetch("https://example.com/", { mode: "navigate" });
        

fetch("https://example.com/", {
  cache: "only-if-cached",
  mode: "no-cors",
});
        

fetch("https://example.com/", { method: "CONNECT" });
        

fetch("https://example.com/", {
  method: "CONNECT",
  mode: "no-cors",
});
        

fetch("https://example.com/", {
  method: "GET",
  body: new FormData(),
});
        

In unserem Fetch Request Beispiel (siehe Fetch Request live) erstellen wir ein neues Request-Objekt mithilfe des entsprechenden Konstruktors und rufen es dann mithilfe eines fetch()-Aufrufs ab. Da wir ein Bild abrufen, verwenden wir Response.blob() auf die Antwort, um ihr den richtigen MIME-Typ zu geben, damit sie korrekt verarbeitet 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 beim Aufruf von fetch() ein options-Objekt übergeben. In diesem Fall können wir einen Cache-Control-Wert festlegen, um anzugeben, mit welchen Arten von zwischengespeicherten Antworten wir einverstanden sind:

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 für die Verwendung von fetch().

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