Widely available Supported across all major browsers. Safe to use in production.

Fetch

The fetch() method of the Window interface starts the process of fetching a resource from the network, returning a promise that is fulfilled once the response is available.

The promise resolves to the Response object representing the response to your request.

A fetch() promise only rejects when the request fails, for example, because of a badly-formed request URL or a network error. A fetch() promise does not reject if the server responds with HTTP status codes that indicate errors (404, 504, etc.). Instead, a then() handler must check the Response.ok and/or Response.status properties.

The fetch() method is controlled by the connect-src directive of Content Security Policy rather than the directive of the resources it's retrieving.

Networking

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`fetch`	42	14	39	10.1	42	10.3
`authorization_removed_cross_origin` `Authorization` header removed from cross-origin redirects			111	16.1		16.1
`blob_data_support` Support for blob: and data:	48	79	39	10.1	48	10.3
`init_keepalive_parameter` `init.keepalive` parameter	66	15	133	13	66	13
`init_referrerPolicy_parameter` `init.referrerPolicy` parameter	52	79	52	11.1	52
`Headers` The Headers interface of the Fetch API allows you to perform various actions on HTTP request and response headers. These actions include retrieving, setting, adding to, and removing headers from the list of the request's headers.	42	14	39	10.1	42	10.3
`@@iterator` [Symbol.iterator]	42	16	44	10.1	42	10.3
`append` The append() method of the Headers interface appends a new value onto an existing header inside a Headers object, or adds the header if it does not already exist.	42	14	39	10.1	42	10.3
`delete` The delete() method of the Headers interface deletes a header from the current Headers object.	42	14	39	10.1	42	10.3
`entries` The Headers.entries() method returns an Iteration_protocols allowing to go through all key/value pairs contained in this object. Both the key and value of each pair are String objects.	42	16	44	10.1	42	10.3
`forEach` The Headers.forEach() method executes a callback function once per each key/value pair in the Headers object.	42	14	47	10.1	42	10.3
`get` The get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn't exist in the Headers object, it returns null.	42	14	39	10.1	42	10.3
`getSetCookie` The getSetCookie() method of the Headers interface returns an array containing the values of all Set-Cookie headers associated with a response. This allows Headers objects to handle having multiple Set-Cookie headers, which wasn't possible prior to its implementation.	113	113	112	17	113	17
`has` The has() method of the Headers interface returns a boolean stating whether a Headers object contains a certain header.	42	14	39	10.1	42	10.3
`Headers` The Headers() constructor creates a new Headers object.	42	14	39	10.1	42	10.3
`iterate_combined_duplicates` Iteration combines duplicate header names	57	16	57	10.1	57	10.3
`iterate_lexicographically` Iteration is lexicographically sorted	57	18	57	10.1	57	10.3
`keys` The Headers.keys() method returns an Iteration_protocols allowing to go through all keys contained in this object. The keys are String objects.	42	16	44	10.1	42	10.3
`set` The set() method of the Headers interface sets a new value for an existing header inside a Headers object, or adds the header if it does not already exist.	42	14	39	10.1	42	10.3
`values` The Headers.values() method returns an Iteration_protocols allowing to go through all values contained in this object. The values are String objects.	42	16	44	10.1	42	10.3
`Request` The Request interface of the Fetch API represents a resource request.	42	14	39	10.1	42	10.3
`arrayBuffer` The arrayBuffer() method of the Request interface reads the request body and returns it as a promise that resolves with an ArrayBuffer.	42	14	39	10.1	42	10.3
`blob` The blob() method of the Request interface reads the request body and returns it as a promise that resolves with a Blob.	42	14	39	10.1	42	10.3
`bodyUsed` The bodyUsed read-only property of the Request interface is a boolean value that indicates whether the request body has been read yet.	42	14	39	10.1	42	10.3
`bytes` The bytes() method of the Request interface reads the request body and returns it as a promise that resolves with a Uint8Array.	132	132	128	18	132	18
`cache` The cache read-only property of the Request interface contains the cache mode of the request. It controls how the request will interact with the browser's HTTP cache.	64	14	48	10.1	64	10.3
`cache (only-if-cached)`	64	79	50	10.1	64	10.3
`clone` The clone() method of the Request interface creates a copy of the current Request object.	40	14	39	10.1	40	10.3
`credentials` The credentials read-only property of the Request interface reflects the value given to the Request.Request() constructor in the credentials option. It determines whether or not the browser sends credentials with the request, as well as whether any Set-Cookie response headers are respected.	40	14	39	10.1	40	10.3
`credentials (default same-origin)` Default value `same-origin`	72	18	61	12.1	72	12.2
`destination` The destination read-only property of the Request interface returns a string describing the type of content being requested.	65	14	61	10.1	65	10.3
`duplex` Experimental The duplex read-only property of the Request interface returns the duplex mode of the request, which determines whether the browser must send the entire request before processing the response.	131	131
`headers` The headers read-only property of the Request interface contains the Headers object associated with the request.	40	14	39	10.1	40	10.3
`integrity` The integrity read-only property of the Request interface contains the subresource integrity value of the request.	46	14	51	10.1	46	10.3
`isHistoryNavigation` The isHistoryNavigation read-only property of the Request interface is a boolean indicating whether the request is a history navigation.	69	79			69
`json` The json() method of the Request interface reads the request body and returns it as a promise that resolves with the result of parsing the body text as JSON.	42	14	39	10.1	42	10.3
`keepalive` The keepalive read-only property of the Request interface contains the request's keepalive setting (true or false), which indicates whether the browser will keep the associated request alive if the page that initiated it is unloaded before the request is complete.	66	15	133	13	66	13
`method` The method read-only property of the Request interface contains the request's method (GET, POST, etc.)	40	14	39	10.1	40	10.3
`mode` The mode read-only property of the Request interface contains the mode of the request (e.g., cors, no-cors, same-origin, or navigate.) This is used to determine if cross-origin requests lead to valid responses, and which properties of the response are readable.	40	14	39	10.1	40	10.3
`mode (navigate mode)` `navigate` mode	49	≤18	46	10.1	49	10.3
`redirect` The redirect read-only property of the Request interface contains the mode for how redirects are handled.	46	14	43	10.1	46	10.3
`referrer` The referrer read-only property of the Request interface is set by the user agent to be the referrer of the Request. (e.g., client, no-referrer, or a URL.)	40	14	39	10.1	40	10.3
`referrerPolicy` The referrerPolicy read-only property of the Request interface returns the referrer policy, which governs what referrer information, sent in the Referer header, should be included with the request.	52	14	47	10.1	52	10.3
`Request` The Request() constructor creates a new Request object.	40	14	39	10.1	40	10.3
`Request (cross origin stripped)` cross-origin `referrer` stripped out and `navigate` mode converted to `same-origin` when constructor created from existing `Request` object.	69	15	54	10.1	69	10.3
`Request (init keepalive parameter)` `init.keepalive` parameter	66	15	133	13	66	13
`Request (init referrer parameter)` `init.referrer` parameter	47	15	47	10.1	47	10.3
`Request (request body readablestream)` Experimental Send `ReadableStream` in request body	105	105			105
`Request (response body readablestream)` Consume `ReadableStream` as a response body	43	79	65		43	10.3
`text` The text() method of the Request interface reads the request body and returns it as a promise that resolves with a String. The response is always decoded using UTF-8.	42	14	39	10.1	42	10.3
`url` The url read-only property of the Request interface contains the URL of the request.	40	14	39	10.1	40	10.3
`Response` The Response interface of the Fetch API represents the response to a request.	42	14	39	10.1	42	10.3
`arrayBuffer` The arrayBuffer() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with an ArrayBuffer.	42	14	39	10.1	42	10.3
`blob` The blob() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with a Blob.	42	14	39	10.1	42	10.3
`body` The body read-only property of the Response interface is a ReadableStream of the body contents.	43	14	65	10.1	43	10.3
`body (readable byte stream)` `body` is a readable byte stream	116	116	102	26.4	116	26.4
`bodyUsed` The bodyUsed read-only property of the Response interface is a boolean value that indicates whether the body has been read yet.	42	14	39	10.1	42	10.3
`bytes` The bytes() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with a Uint8Array.	132	132	128	18	132	18
`clone` The clone() method of the Response interface creates a clone of a response object, identical in every way, but stored in a different variable.	40	14	39	10.1	40	10.3
`error_static` The error() static method of the Response interface returns a new Response object associated with a network error.	43	16	39	10.1	43	10.3
`headers` The headers read-only property of the Response interface contains the Headers object associated with the response.	40	14	39	10.1	40	10.3
`json` The json() method of the Response interface takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.	42	14	39	10.1	42	10.3
`json_static` The json() static method of the Response interface returns a Response that contains the provided JSON data as body, and a Content-Type header which is set to application/json. The response status, status message, and additional headers can also be set.	105	105	115	17	105	17
`ok` The ok read-only property of the Response interface contains a Boolean stating whether the response was successful (status in the range 200-299) or not.	42	14	39	10.1	42	10.3
`redirect_static` The redirect() static method of the Response interface returns a Response resulting in a redirect to the specified URL.	44	16	39	10.1	44	10.3
`redirected` The redirected read-only property of the Response interface indicates whether or not the response is the result of a request you made which was redirected.	57	16	49	10.1	57	10.3
`Response` The Response() constructor creates a new Response object.	40	14	39	10.1	40	10.3
`Response (accept readablestream)` body parameter accepts ReadableByteStream	52	79	39	10.1	52	10.3
`Response (body parameter optional)` `body` parameter is optional	40	79	59	10.1	40	10.3
`status` The status read-only property of the Response interface contains the HTTP status codes of the response.	40	14	39	10.1	40	10.3
`statusText` The statusText read-only property of the Response interface contains the status message corresponding to the HTTP status code in Response.status.	40	14	39	10.1	40	10.3
`text` The text() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with a String. The response is always decoded using UTF-8.	42	14	39	10.1	42	10.3
`type` The type read-only property of the Response interface contains the type of the response. The type determines whether scripts are able to access the response body and headers.	40	14	39	10.1	40	10.3
`url` The url read-only property of the Response interface contains the URL of the response. The value of the url property will be the final URL obtained after any redirects.	40	14	39	10.1	40	10.3

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

window
  .fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

Use cases

Using Fetch

The fetch() method of the Window interface starts the process of fetching a resource from the network, returning a promise that is fulfilled once the response is available.

Cautions

May not be supported in older browsers.

Implementation notes

Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.