Signatur
Beschreibung
Die Methode fetch() des Window-Interfaces startet den Vorgang 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 zum Response-Objekt aufgelöst, das die Antwort auf Ihre Anfrage repräsentiert.
Ein fetch()-Promise wird nur dann abgelehnt, wenn die Anfrage fehlschlägt, zum Beispiel aufgrund einer fehlerhaft aufgebauten Anfrage-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 prüfen.
Die Methode fetch() wird durch die connect-src-Direktive der Content Security Policy gesteuert und nicht durch die Direktive der Ressourcen, die sie abruft.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $resource Pflicht | string | URL | Request | — | Definiert die Ressource, die abgerufen werden soll. Dies kann entweder ein String oder ein anderes Objekt mit einem stringifier — einschließlich eines URL-Objekts — sein, das die URL der abzurufenden Ressource bereitstellt. Die URL kann relativ zur Basis-URL sein, welche in einem Window-Kontext das baseURI des Dokuments ist, oder WorkerGlobalScope.location in einem Worker-Kontext. Alternativ kann ein Request-Objekt übergeben werden. |
| $options | RequestInit | — | Ein RequestInit-Objekt, das benutzerdefinierte Einstellungen enthält, die auf die Anfrage angewendet werden sollen. |
Rückgabewert
Promise, das zu einem Response-Objekt aufgelöst wird.Beispiele
Fetch-Request-Beispiel
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);
});Fetch-Request mit init
const myImage = document.querySelector("img");
const reqHeaders = new Headers();
// Eine gecachte Antwort ist in Ordnung, sofern sie nicht älter als eine Woche ist
reqHeaders.set("Cache-Control", "max-age=604800");
const options = {
headers: reqHeaders,
};
// init als "options"-Objekt mit unseren Headern übergeben.
const req = new Request("flowers.jpg", options);
fetch(req).then((response) => {
// …
});init an den Request-Konstruktor übergeben
const req = new Request("flowers.jpg", options);Objektliteral als headers
const options = {
headers: {
"Cache-Control": "max-age=60480",
},
};
const req = new Request("flowers.jpg", options);// Wichtig · Fallstricke
fetch() sind identisch mit denen des Request()-Konstruktors.
Ausnahmen:
- AbortError (DOMException): Die Anfrage wurde aufgrund eines Aufrufs der Methode abort() eines AbortController abgebrochen.
- NotAllowedError (DOMException): Wird geworfen, wenn die Nutzung der Topics API durch eine browsing-topics-Permissions-Policy verboten ist und browsingTopics auf true gesetzt ist, oder wenn die Nutzung von Private-State-Token-API-Operationen durch eine entsprechende Permissions-Policy verboten ist und die Option privateToken angegeben ist.
- TypeError: Kann aus folgenden Gründen auftreten: Die angeforderte URL ist ungültig; die URL enthält Zugangsdaten (Benutzername und Passwort); das als options übergebene RequestInit-Objekt enthält Eigenschaften mit ungültigen Werten; die Anfrage wird durch eine Permissions Policy blockiert; es liegt ein Netzwerkfehler vor; oder die init-Option privateToken ist mit einem privateToken.operation vom Typ send-redemption-record angegeben und das privateToken.issues-Array war leer oder nicht gesetzt bzw. einer oder mehrere der angegebenen issuers sind keine vertrauenswürdigen HTTPS-URLs.