---
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>