Die Fetch API bietet eine Schnittstelle zum Abrufen von Ressourcen (auch über das Netzwerk). Wer schon einmal mit XMLHttpRequest gearbeitet hat wird Ähnlichkeiten erkennen. Die neue API bietet jedoch einen ganzen Satz leistungsfähigerer und flexiblerer Funktionen.

Konzepte und Verwendung

Fetch bietet eine generische Definition von Request und Response Objekten (und anderen Dingen, die mit Anfragen über ein Netzwerk zu tun haben). Dadurch können sie überall dort eingesetzt werden, wo sie in Zukunft benötigt werden, sei es für Service Worker, die Cache-API und andere ähnliche Dinge, mit denen Anfragen und Antworten abgewickelt oder geändert werden, oder in jedem Anwendungsfall, für den Sie möglicherweise eigene Antworten programmatisch erstellen müssen.

Sie enthält auch eine Definition für verwandte Konzepte wie CORS und die HTTP-Origin-Semantik, die ihre separaten Definitionen an anderer Stelle ersetzen.

Verwenden Sie zum Erstellen einer Anfrage und zum Abrufen einer Ressource die Methode WindowOrWorkerGlobalScope.fetch(). Es ist in mehreren Schnittstellen implementiert, insbesondere Window und WorkerGlobalScope. Dadurch ist es in nahezu jedem Kontext verfügbar, in dem Sie Ressourcen abrufen möchten.

Die Methode fetch() nimmt ein obligatorisches Argument entgegen, den Pfad zu der Ressource, die Sie abrufen möchten. Sie gibt ein Promise zurück, das in die Response dieser Anfrage aufgelöst wird, unabhängig davon, ob sie erfolgreich ist oder nicht. Sie können optional auch ein init Objekt mit Optionen als zweites Argument übergeben (siehe Request).

Nachdem eine Response abgerufen wurde, stehen eine Reihe von Methoden zur Verfügung, mit denen der Antwort-Inhalt (Body) definiert werden kann und wie er verarbeitet werden soll (siehe Body).

Sie können eine Anfrage und Antwort direkt erstellen, indem Sie die Konstruktoren Request() und Response() verwenden, was Sie aber wahrscheinlich in den seltensten Fällen tun werden. Stattdessen werden diese eher als Ergebnis anderer API-Aktionen erstellt (z. B. durch FetchEvent.respondWith() von Service Workern).

Hinweis: Erfahren Sie mehr über die Verwendung der Funktionen der Fetch API in der Verwendung von Fetch und lernen Sie die Grundkonzepte von Fetch.

Einen Abruf abbrechen

Browser haben begonnen, experimentelle Unterstützung für die Schnittstellen AbortController und AbortSignal hinzuzufügen (auch Abort API genannt), die den Abbruch von Operationen durch Fetch und XHR ermöglichen, sofern diese noch nicht abgeschlossen sind. Weitere Informationen finden Sie auf den Schnittstellenseiten.

Fetch Interfaces

WindowOrWorkerGlobalScope.fetch()
Die fetch() Methode zum Abrufen einer Ressource.
Headers
Stellt die Antwort-/Anfrageheader dar, damit Sie sie abfragen und je nach Ergebnis unterschiedliche Aktionen ausführen können.
Request
Stellt eine Ressourcenanfrage dar.
Response
Stellt die Antwort auf eine Anfrage dar.

Fetch mixin

Body
Stellt Methoden bereit, die sich auf den Hauptteil (Body) der Antwort/Anfrage beziehen, sodass Sie den Inhaltstyp angeben können und wie dieser behandelt werden soll.

Spezifikationen

Specification Status Comment
Fetch Lebender Standard Initial definition

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende Unterstützung
Experimentell
Chrome Vollständige Unterstützung 42Edge Vollständige Unterstützung 14Firefox Vollständige Unterstützung 39
Vollständige Unterstützung 39
Vollständige Unterstützung 34
Deaktiviert
Deaktiviert From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
Vollständige Unterstützung 52
Hinweise
Hinweise fetch() now defined on WindowOrWorkerGlobalScope mixin.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 29
Vollständige Unterstützung 29
Vollständige Unterstützung 28
Deaktiviert
Deaktiviert From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 42Chrome Android Vollständige Unterstützung 42Edge Mobile Vollständige Unterstützung 14Firefox Android Vollständige Unterstützung 39
Vollständige Unterstützung 39
Vollständige Unterstützung 34
Deaktiviert
Deaktiviert From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
Vollständige Unterstützung 52
Hinweise
Hinweise fetch() now defined on WindowOrWorkerGlobalScope mixin.
Opera Android ? Safari iOS Vollständige Unterstützung 10.1Samsung Internet Android ?
Streaming response body
Experimentell
Chrome Vollständige Unterstützung 43Edge Vollständige Unterstützung 14Firefox Vollständige Unterstützung Ja
Deaktiviert
Vollständige Unterstützung Ja
Deaktiviert
Deaktiviert This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 29Safari Vollständige Unterstützung 10WebView Android Vollständige Unterstützung 43Chrome Android Vollständige Unterstützung 43Edge Mobile Vollständige Unterstützung 14Firefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Vollständige Unterstützung 10Samsung Internet Android ?
Support for blob: and data:
Experimentell
Chrome Vollständige Unterstützung 48Edge Keine Unterstützung NeinFirefox ? IE Keine Unterstützung NeinOpera ? Safari ? WebView Android Vollständige Unterstützung 43Chrome Android Vollständige Unterstützung 43Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
referrerPolicyChrome Vollständige Unterstützung 52Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 39Safari Vollständige Unterstützung 11.1WebView Android Vollständige Unterstützung 52Chrome Android Vollständige Unterstützung 52Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 39Safari iOS Keine Unterstützung NeinSamsung Internet Android ?
signal
Experimentell
Chrome Vollständige Unterstützung 66Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 57IE Keine Unterstützung NeinOpera Vollständige Unterstützung 53Safari Vollständige Unterstützung 11.1WebView Android Vollständige Unterstützung 66Chrome Android Vollständige Unterstützung 66Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 57Opera Android Vollständige Unterstützung 53Safari iOS Vollständige Unterstützung 11.1Samsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SebinNyshkim
Zuletzt aktualisiert von: mdnwebdocs-bot,