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 responses programmatically(that is, the use of computer program or personal programming instructions).
It also defines 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 WindowOrWorkerGlobalScope.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 it's uncommon 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).
Differences from jQuery
The fetch
specification differs from jQuery.ajax()
in three main ways:
- The Promise returned from
fetch()
won’t reject on HTTP error status even if the response is an HTTP404
or500
. Instead, it will resolve normally (withok
status set tofalse
), and it will only reject on network failure or if anything prevented the request from completing. fetch()
won't receive cross-site cookies. You can’t establish a cross-site session usingfetch()
.Set-Cookie
headers from other sites are silently ignored.fetch()
won’t send cookies, unless you set thecredentials
init option.- In August 2017, the spec changed the default credentials policy to
same-origin
. Firefox updated accordingly with version 61.0b13.
- In August 2017, the spec changed the default credentials policy to
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
WindowOrWorkerGlobalScope.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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fetch | Chrome Full support 42 | Edge Full support 14 | Firefox
Full support
39
| IE No support No | Opera
Full support
29
| Safari Full support 10.1 | WebView Android Full support 42 | Chrome Android Full support 42 | Firefox Android
Full support
39
| Opera Android
Full support
29
| Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
Support for blob: and data: | Chrome Full support 48 | Edge Full support 79 | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android Full support 43 | Chrome Android Full support 48 | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 5.0 |
referrerPolicy | Chrome Full support 52 | Edge Full support 79 | Firefox Full support 52 | IE No support No | Opera Full support 39 | Safari Full support 11.1 | WebView Android Full support 52 | Chrome Android Full support 52 | Firefox Android Full support 52 | Opera Android Full support 41 | Safari iOS No support No | Samsung Internet Android Full support 6.0 |
signal | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari Full support 11.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS Full support 11.3 | Samsung Internet Android Full support 9.0 |
Streaming response body | Chrome Full support 43 | Edge Full support 14 | Firefox
Full support
Yes
| IE No support No | Opera Full support 29 | Safari Full support 10.1 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android No support No | Opera Android No support No | Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.