1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: Response
slug: Web/API/Response
tags:
- API
- Experimental
- Fetch
- Fetch API
- Interface
- NeedsTranslation
- Reference
- Response
- TopicStub
translation_of: Web/API/Response
---
<div>{{APIRef("Fetch API")}}</div>
<p>The <strong><code>Response</code></strong> interface of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the response to a request.</p>
<p>You can create a new <code>Response</code> 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()")}}.</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("Response.Response","Response()")}}</dt>
<dd>Creates a new <code>Response</code> object.</dd>
</dl>
<h2 id="Properties">Properties</h2>
<dl>
<dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
<dd>Contains the {{domxref("Headers")}} object associated with the response.</dd>
<dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
<dd>Contains a boolean stating whether the response was successful (status in the range 200-299) or not.</dd>
<dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
<dd>Indicates whether or not the response is the result of a redirect; that is, its URL list has more than one entry.</dd>
<dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
<dd>Contains the status code of the response (e.g., <code>200</code> for a success).</dd>
<dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
<dd>Contains the status message corresponding to the status code (e.g., <code>OK</code> for <code>200</code>).</dd>
<dt>{{domxref("Response.trailers")}}</dt>
<dd>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.</dd>
<dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
<dd>Contains the type of the response (e.g., <code>basic</code>, <code>cors</code>).</dd>
<dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
<dd>Contains the URL of the response.</dd>
<dt>{{domxref("Response.useFinalURL")}}</dt>
<dd>Contains a boolean stating whether this is the final URL of the response.</dd>
</dl>
<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following properties available to it:</p>
<dl>
<dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
<dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
<dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
<dd>Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<dl>
<dt>{{domxref("Response.clone()")}}</dt>
<dd>Creates a clone of a <code>Response</code> object.</dd>
<dt>{{domxref("Response.error()")}}</dt>
<dd>Returns a new <code>Response</code> object associated with a network error.</dd>
<dt>{{domxref("Response.redirect()")}}</dt>
<dd>Creates a new response with a different URL.</dd>
</dl>
<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following methods available to it:</p>
<dl>
<dt>{{domxref("Body.arrayBuffer()")}}</dt>
<dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
<dt>{{domxref("Body.blob()")}}</dt>
<dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
<dt>{{domxref("Body.formData()")}}</dt>
<dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
<dt>{{domxref("Body.json()")}}</dt>
<dd>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")}}.</dd>
<dt>{{domxref("Body.text()")}}</dt>
<dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">basic fetch example</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) we use a simple <code>fetch()</code> call to grab an image and display it in an {{htmlelement("img")}} tag. The <code>fetch()</code> call returns a promise, which resolves with the <code>Response</code> 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.</p>
<pre class="brush: js">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;
});</pre>
<p>You can also use the {{domxref("Response.Response()")}} constructor to create your own custom <code>Response</code> object:</p>
<pre class="brush: js">const response = new Response();</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Fetch','#response-class','Response')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Response")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
<li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
</ul>
|
