---
title: Response
slug: Web/API/Response
tags:
- API
- Experimental
- Fetch
- Fetch API
- Interface
- NeedsTranslation
- Reference
- Response
- TopicStub
translation_of: Web/API/Response
---
{{APIRef("Fetch API")}}
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()")}} 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("GlobalFetch.fetch()")}}.
Constructor
- {{domxref("Response.Response","Response()")}}
- Creates a new
Response
object.
Properties
- {{domxref("Response.headers")}} {{readonlyinline}}
- Contains the {{domxref("Headers")}} object associated with the response.
- {{domxref("Response.ok")}} {{readonlyinline}}
- Contains a boolean stating whether the response was successful (status in the range 200-299) or not.
- {{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}}
- Contains the status code of the response (e.g.,
200
for a success).
- {{domxref("Response.statusText")}} {{readonlyinline}}
- Contains the status message corresponding to the status code (e.g.,
OK
for 200
).
- {{domxref("Response.trailers")}}
- Contains a {{domxref("Promise")}} resolving to a {{domxref("Headers")}} object associated with the response with {{domxref("Response.headers")}} for values of the HTTP {{HTTPHeader("Trailer")}} header.
- {{domxref("Response.type")}} {{readonlyinline}}
- Contains the type of the response (e.g.,
basic
, cors
).
- {{domxref("Response.url")}} {{readonlyinline}}
- Contains the URL of the response.
- {{domxref("Response.useFinalURL")}}
- Contains a boolean stating whether this is the final URL of the response.
Response
implements {{domxref("Body")}}, so it also has the following properties available to it:
- {{domxref("Body.body")}} {{readonlyInline}}
- A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
- {{domxref("Body.bodyUsed")}} {{readonlyInline}}
- Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.
Methods
- {{domxref("Response.clone()")}}
- Creates a clone of a
Response
object.
- {{domxref("Response.error()")}}
- Returns a new
Response
object associated with a network error.
- {{domxref("Response.redirect()")}}
- Creates a new response with a different URL.
Response
implements {{domxref("Body")}}, so it also has the following methods available to it:
- {{domxref("Body.arrayBuffer()")}}
- Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
- {{domxref("Body.blob()")}}
- Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
- {{domxref("Body.formData()")}}
- Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
- {{domxref("Body.json()")}}
- Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text asĀ {{jsxref("JSON")}}.
- {{domxref("Body.text()")}}
- Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).
Examples
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")}} tag. The fetch()
call returns a promise, which resolves with the Response
object associated with the resource fetch operation. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.
const image = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
return response.blob();
}).then(function(blob) {
const objectURL = URL.createObjectURL(blob);
image.src = objectURL;
});
You can also use the {{domxref("Response.Response()")}} constructor to create your own custom Response
object:
const response = new Response();
Specifications
Specification |
Status |
Comment |
{{SpecName('Fetch','#response-class','Response')}} |
{{Spec2('Fetch')}} |
Initial definition |
Browser compatibility
{{Compat("api.Response")}}
See also