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
Responseobject.
Properties
Response.headersRead only- Contains the
Headersobject associated with the response. Response.okRead only- Contains a boolean stating whether the response was successful (status in the range 200-299) or not.
Response.redirectedRead only- Indicates whether or not the response is the result of a redirect; that is, its URL list has more than one entry.
Response.statusRead only- Contains the status code of the response (e.g.,
200for a success). Response.statusTextRead only- Contains the status message corresponding to the status code (e.g.,
OKfor200). Response.typeRead only- Contains the type of the response (e.g.,
basic,cors). Response.urlRead 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 property available to it:
Body.bodyUsedRead only- Stores a
Booleanthat declares whether the body has been used in a response yet.
Methods
Response.clone()- Creates a clone of a
Responseobject. Response.error()- Returns a new
Responseobject 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
Responsestream and reads it to completion. It returns a promise that resolves with anArrayBuffer. Body.blob()- Takes a
Responsestream and reads it to completion. It returns a promise that resolves with aBlob. Body.formData()- Takes a
Responsestream and reads it to completion. It returns a promise that resolves with aFormDataobject. Body.json()- Takes a
Responsestream and reads it to completion. It returns a promise that resolves with the result of parsing the body text asJSON. Body.text()- Takes a
Responsestream and reads it to completion. It returns a promise that resolves with aUSVString(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
| Specification | Status | Comment |
|---|---|---|
| Fetch The definition of 'Response' in that specification. |
Living Standard | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 41[1] 42 |
(Yes) | 34 (34) [1] 39 (39) |
No support | 28[1] 29 |
10.1 |
redirected attribute |
57 | ? | 49 (49) | No support | ? | No support |
| Feature | Android | Edge | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | No support | (Yes) | 34.0 (34) [1] 39.0 (39) |
? | No support | ? | No support | ? |
redirected attribute |
No support | ? | 49.0 (49) | ? | No support | ? | No support | ? |
[1] This was implemented behind a preference until Firefox 39.