The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used
XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
Concepts and usage
Fetch provides a generic definition of
Response objects (and other things involved with network requests). This will allow them to be used wherever they are needed in the future, whether it’s for service workers, Cache API and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your own responses programmatically.
It also provides a definition for related concepts such as CORS and the HTTP origin header semantics, supplanting their separate definitions elsewhere.
For making a request and fetching a resource, use the
GlobalFetch.fetch method. It is implemented in multiple interfaces, specifically
WorkerGlobalScope. This makes it available in pretty much any context you might want to fetch resources in.
fetch() method takes one mandatory argument, the path to the resource you want to fetch. It returns a promise that resolves to the
Response to that request, whether it is successful or not. You can also optionally pass in an
init options object as the second argument (see
You can create a request and response directly using the
Response() constructors, but you are unlikely to do this directly. Instead, these are more likely to be created as results of other API actions (for example,
FetchEvent.respondWith from service workers).
- Contains the
fetch()method used to fetch a resource.
- Represents response/request headers, allowing you to query them and take different actions depending on the results.
- Represents a resource request.
- Represents the response to a request.
Experimental fetch controller/signal/observer interfaces
Also known as “cancellable fetch”, the following interfaces contain functionality to allow fetch request operations to be observed and controlled during their lifetimes.
- Represents a controller object that allows you to control one or more fetch requests.
- Represents a signal object that allows you to communicate with a fetch request and control it via a
- Represents an observer object that allows you to retrieve information concerning the status of a fetch request.
- Provides a callback function that runs when the fetch request it is assocated with runs. This provides a
FetchObserverobject that can be used to retrieve information concerning the status of a fetch request.
- Provides methods relating to the body of the response/request, allowing you to declare what its content type is and how it should be handled.
|Fetch||Living Standard||Initial definition|
|Feature||Chrome||Edge||Firefox (Gecko)||IE||Opera||Safari (WebKit)|
|Basic support||42||14||39 (39)
|Streaming response body||43||14||?||No support||?||No support|
|Experimental controller/signal/observer||No support||No support||No support||No support||No support||No support|
|Feature||Android Webview||Chrome for Android||Edge||Firefox Mobile (Gecko)||IE Phone||Opera Mobile||Safari Mobile|
|Basic support||42||42||(Yes)||(Yes)||No support||No support||10.1|
|Streaming response body||43||43||(Yes)||(Yes)||No support||?||No support|
|Experimental controller/signal/observer||No support||No support||No support||No support||No support||No support||No support|
 This API is implemented behind a preference.
 Prior to Firefox 52,
get() only returned the first value in the specified header, with
getAll() returning all values. From 52 onwards,
get() now returns all values and
getAll() has been removed.
 Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs —
dom.fetchController.enabled — and set the values of both to