Window: fetch() Method

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 bereitstellt, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, welche im Fensterkontext die baseURI des Dokuments ist oder WorkerGlobalScope.location im Worker-Kontext.
• Ein Request-Objekt.

options Optional

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

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

AbortError DOMException

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

NotAllowedError DOMException

Ausgelöst, wenn die Nutzung der Topics API ausdrücklich durch eine 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:password@example.com/");
        

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 mit dem entsprechenden Konstruktor und rufen es dann mit einem fetch()-Aufruf ab. Da wir ein Bild abrufen, führen wir Response.blob() für die Antwort aus, um ihm den richtigen MIME-Typ zu geben, damit es ordnungsgemäß behandelt wird. Dann erstellen wir eine Objekt-URL daraus und zeigen es 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) machen wir das gleiche, außer dass wir beim Aufruf von fetch() ein options-Objekt übergeben. In diesem Fall können wir einen Cache-Control-Wert setzen, um anzugeben, mit welchen Art 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 den gleichen 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().

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