Response

The Response interface of the Fetch API represents the response to a request.

You can create a new Response object using the Response.Response() (en-US) constructor, but you are more likely to encounter a Response object being returned as the result of another API operation, for example a service worker Fetchevent.respondWith (en-US), or a simple GlobalFetch.fetch() (en-US).

Constructor

Response() (en-US)
Creates a new Response object.

Properties

Response.headers (en-US) Read only
Contains the Headers (en-US) object associated with the response.
Response.ok (en-US) Read only
Contains a boolean stating whether the response was successful (status in the range 200-299) or not.
Response.redirected (en-US) Read only
Indicates whether or not the response is the result of a redirect; that is, its URL list has more than one entry.
Response.status (en-US) Read only
Contains the status code of the response (e.g., 200 for a success).
Response.statusText (en-US) Read only
Contains the status message corresponding to the status code (e.g., OK for 200).
Response.trailers
Contains a Promise (en-US) resolving to a Headers (en-US) object associated with the response with Response.headers (en-US) for values of the HTTP Trailer (en-US) header.
Response.type (en-US) Read only
Contains the type of the response (e.g., basic, cors).
Response.url (en-US) Read only
Contains the URL of the response.
Response.useFinalURL
Contains a boolean stating whether this is the final URL of the response.

Response implements Body (en-US), so it also has the following properties available to it:

Body.body (en-US) Read only
A simple getter used to expose a ReadableStream (en-US) of the body contents.
Body.bodyUsed (en-US) Read only
Stores a Boolean (en-US) that declares whether the body has been used in a response yet.

Methods

Response.clone() (en-US)
Creates a clone of a Response object.
Response.error() (en-US)
Returns a new Response object associated with a network error.
Response.redirect() (en-US)
Creates a new response with a different URL.

Response implements Body (en-US), so it also has the following methods available to it:

Body.arrayBuffer() (en-US)
Takes a Response stream and reads it to completion. It returns a promise that resolves with an ArrayBuffer (en-US).
Body.blob() (en-US)
Takes a Response stream and reads it to completion. It returns a promise that resolves with a Blob (en-US).
Body.formData() (en-US)
Takes a Response stream and reads it to completion. It returns a promise that resolves with a FormData (en-US) object.
Body.json() (en-US)
Takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON.
Body.text() (en-US)
Takes a Response stream and reads it to completion. It returns a promise that resolves with a USVString (en-US) (text).

Examples

In our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an <img> (en-US) tag. The fetch() call returns a promise, which resolves with the Response object associated with the resource fetch operation. You'll notice that since we are requesting an image, we need to run Body.blob (en-US) (Response implements body) to give the response its correct MIME type.

const image = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(blob) {
  const objectURL = URL.createObjectURL(blob);
  image.src = objectURL;
});

You can also use the Response.Response() (en-US) constructor to create your own custom Response object:

const response = new Response();

Specifications

Specification Status Comment
Fetch
The definition of 'Response' in that specification.
Living Standard Initial definition

Browser compatibility

BCD tables only load in the browser

See also