Revision 1027058 of Request

<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div>

<p>The <strong><code>Request</code></strong> interface of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents a resource request.</p>

<p>You can create a new <code>Request</code> object using the {{domxref("Request.Request()")}} constructor, but you are more likely to encounter a <code>Request</code> object being returned as the result of another API operation, such as a service worker {{domxref("FetchEvent.request")}}.</p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("Request.Request()")}}</dt>
 <dd>Creates a new <code>Request</code> object.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
 <dd>Contains the request's method (<code>GET</code>, <code>POST</code>, etc.)</dd>
 <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
 <dd>Contains the URL of the request.</dd>
 <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
 <dd>Contains the associated {{domxref("Headers")}} object of the request.</dd>
 <dt>{{domxref("Request.context")}} {{readonlyInline}}&nbsp;{{deprecated_inline()}}</dt>
 <dd>Contains the context of the request (e.g., <code>audio</code>, <code>image</code>, <code>iframe</code>, etc.)</dd>
 <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
 <dd>Contains the referrer of the request (e.g., <code>client</code>).</dd>
 <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
 <dd>Contains the mode of the request (e.g., <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
 <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
 <dd>Contains the credentials of the request (e.g., <code>omit</code>, <code>same-origin</code>).</dd>
 <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
 <dd>Contains the mode for how redirects are handled. It may be one of <code>follow</code>, <code>error</code>, or <code>manual</code>.</dd>
 <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
 <dd>Contains the <a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> value&nbsp;of the request (e.g., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
 <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
 <dd>Contains the cache mode of the request (e.g., <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
</dl>

<p><code>Request</code> implements {{domxref("Body")}}, so it also has the following property available to it:</p>

<dl>
 <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("Request.clone()")}}</dt>
 <dd>Creates a copy of the current <code>Request</code> object.</dd>
</dl>

<p><code>Request</code> implements {{domxref("Body")}}, so it also has the following methods available to it:</p>

<dl>
 <dt>{{domxref("Body.arrayBuffer()")}}</dt>
 <dd>Returns a promise that resolves with an&nbsp;{{domxref("ArrayBuffer")}} representation of the request body.</dd>
 <dt>{{domxref("Body.blob()")}}</dt>
 <dd>Returns a promise that resolves with an&nbsp;{{domxref("Blob")}} representation of the request body.</dd>
 <dt>{{domxref("Body.formData()")}}</dt>
 <dd>Returns a promise that resolves with an&nbsp;{{domxref("FormData")}} representation of the request body.</dd>
 <dt>{{domxref("Body.json()")}}</dt>
 <dd>Returns a promise that resolves with an&nbsp;{{domxref("JSON")}} representation of the request body.</dd>
 <dt>{{domxref("Body.text()")}}</dt>
 <dd>Returns a promise that resolves with an&nbsp;{{domxref("USVString")}} (text) representation of the request body.</dd>
</dl>

<p>Note: The {{domxref("Body")}} functions can be run only once; next calls will resolve with empty strings/ArrayBuffers.</p>

<h2 id="Examples">Examples</h2>

<p>In the following snippet, we create a new request using the <code>Request()</code> constructor (for an image file in the same directory as the script), then return some property values of the request:</p>

<pre class="brush: js">
var myRequest = new Request('flowers.jpg');

var myURL = myRequest.url; // https://localhost:8000/flowers.jpg
var myMethod = myRequest.method; // GET
var myCred = myRequest.credentials; // omit
</pre>

<p>You could then fetch this request by passing the <code>Request</code> object in as a parameter to a {{domxref("GlobalFetch.fetch()")}} call, for example:</p>

<pre class="brush: js">
fetch(myRequest).then(function(response) {
      return response.blob();
    }).then(function(response) {
      var objectURL = URL.createObjectURL(response);
      myImage.src = objectURL;
    });</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','#request-class','Request')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>
    <p>{{CompatChrome(42.0)}}</p>
   </td>
   <td>{{CompatGeckoDesktop(39)}}<br />
    34<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>
    <p>29<br />
     28<sup>[1]</sup></p>
   </td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Request.integrity</code></td>
   <td>{{CompatChrome(45.0)}}</td>
   <td>&nbsp;</td>
   <td>{{CompatNo}}</td>
   <td>&nbsp;</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Request.redirect</code></td>
   <td>{{CompatChrome(46.0)}}</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(42.0)}}</td>
  </tr>
  <tr>
   <td><code>Request.integrity</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>{{CompatChrome(45.0)}}</td>
  </tr>
  <tr>
   <td><code>Request.redirect</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>{{CompatChrome(46.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

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