Window: fetch()-Methode

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 abzurufenden Ressource angibt. Die URL kann relativ zur Basis-URL sein, welche 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 durch einen Aufruf der AbortController-Methode abort() abgebrochen.

NotAllowedError DOMException

Wird ausgelöst, wenn die Nutzung der Topics API speziell durch eine browsing-topics-Permission Policy untersagt ist 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 einer fetch()-Anfrage ab. Da wir ein Bild abrufen, führen wir Response.blob() auf die Antwort aus, um ihr den richtigen MIME-Typ zu geben, damit sie korrekt verarbeitet wird. Anschließend erstellen wir 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 mit init Beispiel (siehe Fetch Request init live) tun wir dasselbe, jedoch übergeben wir beim Aufruf von fetch() ein options-Objekt. In diesem Fall können wir einen Cache-Control-Wert setzen, um anzugeben, welche Arten von zwischengespeicherten Antworten akzeptabel 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 im Request-Konstruktor übergeben, um den gleichen Effekt zu erzielen:

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

Sie können auch ein Objekt-Literal 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 access control (CORS)
• HTTP