W3cubDocs

/Web APIs

Response

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

You can create a new Response object using the Response() 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, or a simple fetch().

Constructor

Response()

Creates a new Response object.

Instance properties

Response.body Read only

A ReadableStream of the body contents.

Response.bodyUsed Read only

Stores a boolean value that declares whether the body has been used in a response yet.

Response.headers Read only

The Headers object associated with the response.

Response.ok Read only

A boolean indicating whether the response was successful (status in the range 200299) or not.

Response.redirected 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 Read only

The status code of the response. (This will be 200 for a success).

Response.statusText Read only

The status message corresponding to the status code. (e.g., OK for 200).

Response.type Read only

The type of the response (e.g., basic, cors).

Response.url Read only

The URL of the response.

Static methods

Response.error()

Returns a new Response object associated with a network error.

Response.redirect()

Returns a new response with a different URL.

Response.json()

Returns a new Response object for returning the provided JSON encoded data.

Instance methods

Response.arrayBuffer()

Returns a promise that resolves with an ArrayBuffer representation of the response body.

Response.blob()

Returns a promise that resolves with a Blob representation of the response body.

Response.clone()

Creates a clone of a Response object.

Response.formData()

Returns a promise that resolves with a FormData representation of the response body.

Response.json()

Returns a promise that resolves with the result of parsing the response body text as JSON.

Response.text()

Returns a promise that resolves with a text representation of the response body.

Examples

Fetching an image

In our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an <img> element. The fetch() call returns a promise, which resolves to the Response object associated with the resource fetch operation.

You'll notice that since we are requesting an image, we need to run Response.blob to give the response its correct MIME type.

js

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

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

js

const response = new Response();

An Ajax Call

Here we call a PHP program file that generates a JSON string, displaying the result as a JSON value, including simple error handling.

js

// Function to do an Ajax call
const doAjax = async () => {
  const response = await fetch("Ajax.php"); // Generate the Response object
  if (response.ok) {
    return response.json(); // Get JSON value from the response body
  }
  throw new Error("*** PHP file not found");
};

// Call the function and output value or error message to console
doAjax().then(console.log).catch(console.log);

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Response 40 14 39 No 27 10.1 40 40 39 27 10.3 4.0
Response 42
40–42Only available in service workers.
14 39 No 29
27–29Only available in service workers.
10.1 42
40–42Only available in service workers.
42
40–42Only available in service workers.
39 29
27–29Only available in service workers.
10.3 4.0
arrayBuffer 42 14 39 No 29 10.1 42 42 39 29 10.3 4.0
blob 42 14 39 No 29 10.1 42 42 39 29 10.3 4.0
body 43 14 65 No 30 10.1 43 43 65 30 10.3 4.0
bodyUsed 42 14 39 No 29 10.1 42 42 39 29 10.3 4.0
clone 40 14 39 No 27 10.1 40 40 39 27 10.3 4.0
error_static 43 16 39 No 30 10.1 43 43 39 30 10.3 4.0
formData 60 79 39 No 47 14.1
10.1The method exists but always rejects with NotSupportedError. See bug 215671.
60 60 39 44 14.5
10.3The method exists but always rejects with NotSupportedError. See bug 215671.
8.0
headers 40 14 39 No 27 10.1 40 40 39 27 10.3 4.0
json 42 14 39 No 29 10.1 42 42 39 29 10.3 4.0
json_static 105 105 115 No 91 17 105 105 115 72 17 20.0
ok 42 14 39 No 29 10.1 42 42 39 29 10.3 4.0
redirect_static 44 16 39 No 31 10.1 44 44 39 32 10.3 4.0
redirected 57 16 49 No 44 10.1 60 57 49 43 10.3 8.0
status 40 14 39 No 27 10.1 40 40 39 27 10.3 4.0
statusText 40 14 39 No 27 10.1 40 40 39 27 10.3 4.0
text 42 14 39 No 29 10.1 42 42 39 29 10.3 4.0
type 40 14 39 No 27 10.1 40 40 39 27 10.3 4.0
url 40 14 39 No 27 10.1 40 40 39 27 10.3 4.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Response