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 AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
fetch
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 42Firefox 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 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 iOS Vollständige Unterstützung 10.3Samsung 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 48Firefox 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 52Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 41Safari 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 66Firefox Android Vollständige Unterstützung 57Opera Android Vollständige Unterstützung 47Safari iOS Vollständige Unterstützung 11.1Samsung Internet Android Keine Unterstützung Nein
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 10.1WebView Android Vollständige Unterstützung 43Chrome Android Vollständige Unterstützung 43Firefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Vollständige Unterstützung 10.3Samsung Internet Android ?

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,