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")}} , 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}}- : A
{{domxref("ReadableStream")}}of the body contents.
- : A
{{domxref("Response.bodyUsed")}}{{ReadOnlyInline}}- : Stores a boolean value that declares whether the body has been used in a response yet.
{{domxref("Response.headers")}}{{ReadOnlyInline}}- : The
{{domxref("Headers")}}object associated with the response.
- : The
{{domxref("Response.ok")}}{{ReadOnlyInline}}- : 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}}- : 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}}- : 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}}- : 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}}- : The type of the response (e.g.,
basic,cors).
- : The type of the response (e.g.,
{{domxref("Response.url")}}{{ReadOnlyInline}}- : 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")}}representation of the response body.
- : Returns a promise that resolves with an
{{domxref("Response.blob()")}}- : Returns a promise that resolves with a
{{domxref("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")}}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")}}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")}}.
- : 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.
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")}} 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")}} 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 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}}