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 Request and 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 Window and WorkerGlobalScope. This makes it available in pretty much any context you might want to fetch resources in.

The 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 Request).

Once a Response is retrieved, there are a number of methods available to define what the body content is and how it should be handled (see Body).

You can create a request and response directly using the Request() and 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).

Note: Find out more about using the Fetch API features in Using Fetch, and study concepts in Fetch basic concepts.

Aborting a fetch

Browsers have started to add experimental support for the AbortController and AbortSignal interfaces (aka The Abort API), which allow operations like Fetch and XHR to be aborted if they have not already completed. See the interface pages for more details.

Fetch Interfaces

fetch()
The fetch() method used to fetch a resource.
Headers
Represents response/request headers, allowing you to query them and take different actions depending on the results.
Request
Represents a resource request.
Response
Represents the response to a request.

Fetch mixin

Body
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.

Specifications

Specification Status Comment
Fetch Living Standard Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support4214

39

341

522

No

29

283

10
Streaming response body4314 No No2910
Support for blob: and data:48 No ? No ? ?
referrerPolicy52 Yes ? No39 ?
signal ? ?57 No ? No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support424214

39

341

522

?10 ?
Streaming response body434314 No No10 ?
Support for blob: and data:4343 No ? ? ? ?
referrerPolicy5252 ? ?39 ? ?
signal ? ? ?57 ? No ?

1. From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.

2. fetch() now defined on WindowOrWorkerGlobalScope mixin.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

[1] This API is implemented behind a preference.

[2] 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.

[3] Readable streams are currently enabled in Firefox, but hidden behind the dom.streams.enabled and javascript.options.streams prefs.

See also