Fetch API
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
* Some parts of this feature may have varying levels of support.
Note: This feature is available in Web Workers.
The Fetch API provides an interface for fetching resources (including across the network). It is a more powerful and flexible replacement for
XMLHttpRequest.Concepts and usage
The Fetch API uses
Request and Response objects (and other things involved with network requests), as well as related concepts such as CORS and the HTTP Origin header semantics.For making a request and fetching a resource, use the
fetch() method. It is a global method in both Window and Worker contexts. 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 — as soon as the server responds with headers — even if the server response is an HTTP error status. 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.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).Find out more about using the Fetch API features in Using Fetch.
Interfaces
Window.fetch()andWorkerGlobalScope.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.
Specifications
| Specification |
|---|
| Fetch # fetch-method (external) |
Browser compatibility
|
Chrome
|
Edge
|
Firefox
|
Opera
|
Safari
|
Chrome Android
|
Firefox for Android
|
Opera Android
|
Safari on iOS
|
Samsung Internet
|
WebView Android
|
WebView on iOS
|
Bun
|
Deno
|
Node.js
|
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
header removed from cross-origin redirects
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Support for blob: and data:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Send in body
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
Full support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.
