Response
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 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 new
Responseobject.
Instance properties
Response.bodyRead onlyA
ReadableStreamof the body contents.Response.bodyUsedRead onlyStores a boolean value that declares whether the body has been used in a response yet.
Response.headersRead onlyThe
Headersobject associated with the response.Response.okRead onlyA boolean indicating whether the response was successful (status in the range
200–299) or not.Response.redirectedRead onlyIndicates whether or not the response is the result of a redirect (that is, its URL list has more than one entry).
Response.statusRead onlyThe status code of the response. (This will be
200for a success).Response.statusTextRead onlyThe status message corresponding to the status code. (e.g.,
OKfor200).Response.typeRead onlyThe type of the response (e.g.,
basic,cors).Response.urlRead onlyThe URL of the response.
Static methods
Response.error()Returns a new
Responseobject associated with a network error.Response.redirect()Returns a new response with a different URL.
Response.json()Returns a new
Responseobject for returning the provided JSON encoded data.
Instance methods
Response.arrayBuffer()Returns a promise that resolves with an
ArrayBufferrepresentation of the response body.Response.blob()Returns a promise that resolves with a
Blobrepresentation of the response body.Response.bytes()Returns a promise that resolves with a
Uint8Arrayrepresentation of the response body.Response.clone()Creates a clone of a
Responseobject.Response.formData()Returns a promise that resolves with a
FormDatarepresentation 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 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));Specifications
| Specification |
|---|
| Fetch # response-class |