Response
The Response
interface of the Fetch API represents the response to a request.
You can create a new Response
object using the 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 Fetchevent.respondWith
, or a simple GlobalFetch.fetch()
.
Constructor
Response()
- Creates a new
Response
object.
Properties
-
Response.headers
Read only
- Contains the
Headers
object associated with the response. -
Response.ok
Read only
- Contains a boolean stating whether the response was successful (status in the range 200-299) or not.
-
Response.redirected
Read only
- Indicates whether or not the response is the result of a redirect; that is, its URL list has more than one entry.
-
Response.status
Read only
- Contains the status code of the response (e.g.,
200
for a success). -
Response.statusText
Read only
- Contains the status message corresponding to the status code (e.g.,
OK
for 200
). -
Response.type
Read only
- Contains the type of the response (e.g.,
basic
, cors
). -
Response.url
Read only
- Contains the URL of the response.
Response.useFinalURL
- Contains a boolean stating whether this is the final URL of the response.
Response
implements Body
, so it also has the following properties available to it:
-
Body.body
Read only
- A simple getter used to expose a
ReadableStream
of the body contents. -
Body.bodyUsed
Read only
- Stores a
Boolean
that declares whether the body has been used in a response yet.
Methods
Response.clone()
- Creates a clone of a
Response
object. Response.error()
- Returns a new
Response
object associated with a network error. Response.redirect()
- Creates a new response with a different URL.
Response
implements Body
, so it also has the following methods available to it:
Body.arrayBuffer()
- Takes a
Response
stream and reads it to completion. It returns a promise that resolves with an ArrayBuffer
. Body.blob()
- Takes a
Response
stream and reads it to completion. It returns a promise that resolves with a Blob
. Body.formData()
- Takes a
Response
stream and reads it to completion. It returns a promise that resolves with a FormData
object. Body.json()
- Takes a
Response
stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON
. Body.text()
- Takes a
Response
stream and reads it to completion. It returns a promise that resolves with a 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 <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 Body.blob
(Response
implements body) to give the response its correct MIME type.
var myImage = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
return response.blob();
}).then(function(blob) {
var objectURL = URL.createObjectURL(blob);
myImage.src = objectURL;
});
You can also use the Response.Response()
constructor to create your own custom Response
object:
var myResponse = new Response();
Specifications
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support |
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
39 |
No |
29 |
10.1 |
Response() constructor
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
15 |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
10.1 |
headers
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
No |
ok
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
No |
redirected
|
60 |
16 |
49 |
No |
47 |
No |
status
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
No |
statusText
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
No |
type
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
No |
url
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
No |
useFinalURL
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
No |
clone
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
No |
error
|
Yes |
Yes |
Yes |
No |
Yes |
Yes |
redirect
|
Yes |
Yes |
Yes |
No |
Yes |
Yes |
trailer |
? |
? |
? |
? |
? |
? |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support |
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference.
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
Yes |
29 |
10.1 |
4.0 |
Response() constructor
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference.
|
42
- 42
- 41
Disabled
- Disabled From version 41: this feature is behind the
Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
|
Yes |
Yes |
29
- 29
- 28
Disabled
- Disabled From version 28: this feature is behind the
Experimental Web Platform Features preference.
|
10.3 |
4.0 |
headers
|
No |
No |
Yes |
No |
No |
No |
No |
ok
|
No |
No |
Yes |
No |
No |
No |
No |
redirected
|
60 |
60 |
Yes |
49 |
47 |
No |
No |
status
|
No |
No |
Yes |
No |
No |
No |
No |
statusText
|
No |
No |
Yes |
No |
No |
No |
No |
type
|
No |
No |
Yes |
No |
No |
No |
No |
url
|
No |
No |
Yes |
No |
No |
No |
No |
useFinalURL
|
No |
No |
Yes |
39
- 39
- 34
Disabled
- Disabled From version 34: this feature is behind the
dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
|
No |
No |
No |
clone
|
No |
No |
Yes |
No |
No |
No |
No |
error
|
No |
No |
? |
No |
No |
No |
No |
redirect
|
No |
No |
? |
No |
No |
No |
No |
trailer |
? |
? |
? |
? |
? |
? |
? |
See also