Response

BaselineWidely 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 inWeb Workers.

TheResponse interface of theFetch API represents the response to a request.

You can create a newResponse object using theResponse() constructor, but you are more likely to encounter aResponse object being returned as the result of another API operation—for example, a service workerFetchEvent.respondWith, or a simplefetch().

Constructor

Response(): Creates a newResponse object.

Instance properties

Response.bodyRead only: AReadableStream of the body contents.
Response.bodyUsedRead only: Stores a boolean value that declares whether the body has been used in a response yet.
Response.headersRead only: TheHeaders object associated with the response.
Response.okRead only: A boolean indicating whether the response was successful (status in the range200 –299) or not.
Response.redirectedRead only: Indicates whether or not the response is the result of a redirect (that is, its URL list has more than one entry).
Response.statusRead only: The status code of the response. (This will be200 for a success).
Response.statusTextRead only: The status message corresponding to the status code. (e.g.,OK for200).
Response.typeRead only: The type of the response (e.g.,basic,cors).
Response.urlRead only: The URL of the response.

Static methods

Response.error(): Returns a newResponse object associated with a network error.
Response.redirect(): Returns a new response with a different URL.
Response.json(): Returns a newResponse object for returning the provided JSON encoded data.

Instance methods

Response.arrayBuffer(): Returns a promise that resolves with anArrayBuffer representation of the response body.
Response.blob(): Returns a promise that resolves with aBlob representation of the response body.
Response.bytes(): Returns a promise that resolves with aUint8Array representation of the response body.
Response.clone(): Creates a clone of aResponse object.
Response.formData(): Returns a promise that resolves with aFormData representation of the response body.
Response.json(): Returns a promise that resolves with the result of parsing the response body text asJSON.
Response.text(): Returns a promise that resolves with a text representation of the response body.

Examples

Fetching an image

In ourbasic fetch example (run example live) we use a simplefetch() call to grab an image and display it in an<img> element.Thefetch() call returns a promise, which resolves to theResponse object associated with the resource fetch operation.

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

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 theResponse() constructor to create your own customResponse object:

const response = new Response();

A PHP Call

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

// Function to fetch JSON using PHPconst getJSON = async () => {  // Generate the Response object  const response = await fetch("getJSON.php");  if (response.ok) {    // Get JSON value from the response body    return response.json();  }  throw new Error("*** PHP file not found");};// Call the function and output value or error message to consolegetJSON()  .then((result) => console.log(result))  .catch((error) => console.error(error));