Response
{{APIRef("Fetch API")}}{{AvailableInWorkers}}
The Response interface of the Fetch API represents the response to a request.
You can create a new Response object using the {{domxref("Response.Response", "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 {{domxref("FetchEvent.respondWith")}}respondWith, or a simple {{domxref("Window/fetch", "fetch()")}}.
Constructor
{{domxref("Response.Response","Response()")}}- : Creates a new
Responseobject.
- : Creates a new
Instance properties
{{domxref("Response.body")}} {{ReadOnlyInline}}body- : A
{{domxref("ReadableStream")}}ReadableStream of the body contents.
- : A
{{domxref("Response.bodyUsed")}} {{ReadOnlyInline}}bodyUsed- : Stores a boolean value that declares whether the body has been used in a response yet.
{{domxref("Response.headers")}} {{ReadOnlyInline}}headers- : The
{{domxref("Headers")}}Headers object associated with the response.
- : The
{{domxref("Response.ok")}} {{ReadOnlyInline}}ok- : A boolean indicating whether the response was successful (status in the range
200–299) or not.
- : A boolean indicating whether the response was successful (status in the range
{{domxref("Response.redirected")}} {{ReadOnlyInline}}redirected- : Indicates whether or not the response is the result of a redirect (that is, its URL list has more than one entry).
{{domxref("Response.status")}} {{ReadOnlyInline}}status- : The status code of the response. (This will be
200for a success).
- : The status code of the response. (This will be
{{domxref("Response.statusText")}} {{ReadOnlyInline}}statusText- : The status message corresponding to the status code. (e.g.,
OKfor200).
- : The status message corresponding to the status code. (e.g.,
{{domxref("Response.type")}} {{ReadOnlyInline}}type- : The type of the response (e.g.,
basic,cors).
- : The type of the response (e.g.,
{{domxref("Response.url")}} {{ReadOnlyInline}}url- : The URL of the response.
Static methods
{{domxref("Response.error_static","Response.error()")}}- : Returns a new
Responseobject associated with a network error.
- : Returns a new
{{domxref("Response.redirect_static", "Response.redirect()")}}- : Returns a new response with a different URL.
{{domxref("Response.json_static", "Response.json()")}}- : Returns a new
Responseobject for returning the provided JSON encoded data.
- : Returns a new
Instance methods
{{domxref("Response.arrayBuffer()")}}- : Returns a promise that resolves with an
{{jsxref("ArrayBuffer")}}ArrayBuffer representation of the response body.
- : Returns a promise that resolves with an
{{domxref("Response.blob()")}}- : Returns a promise that resolves with a
{{domxref("Blob")}}Blob representation of the response body.
- : Returns a promise that resolves with a
{{domxref("Response.bytes()")}}- : Returns a promise that resolves with a
{{jsxref("Uint8Array")}}Uint8Array representation of the response body.
- : Returns a promise that resolves with a
{{domxref("Response.clone()")}}- : Creates a clone of a
Responseobject.
- : Creates a clone of a
{{domxref("Response.formData()")}}- : Returns a promise that resolves with a
{{domxref("FormData")}}FormData representation of the response body.
- : Returns a promise that resolves with a
{{domxref("Response.json()")}}- : Returns a promise that resolves with the result of parsing the response body text as
{{jsxref("JSON")}}JSON.
- : Returns a promise that resolves with the result of parsing the response body text as
{{domxref("Response.text()")}}- : Returns a promise that resolves with a text representation of the response body.
{{domxref("Response.textStream()")}} {{experimental_inline}}- : Returns a
{{domxref("ReadableStream")}}ReadableStream that can be used to read the contents of the response body in chunks of UTF-8.
- : Returns a
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 {{htmlelement("img")}}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 {{domxref("Response.blob")}}blob to give the response its correct MIME type.
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.blob();
})
.then((blob) => {
const objectURL = URL.createObjectURL(blob);
image.src = objectURL;
})
.catch((error) => {
console.error("Error fetching the image:", error);
});
You can also use the {{domxref("Response.Response", "Response()")}} constructor to create your own custom Response 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 PHP
const 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 console
getJSON()
.then((result) => console.log(result))
.catch((error) => console.error(error));
Specifications
{{Specifications}}
Browser compatibility
{{Compat}}