Request
=======

The **`Request`** interface of the Fetch API represents a resource request.

You can create a new `Request` object using the `Request()` constructor, but you are more likely to encounter a `Request` object being returned as the result of another API operation, such as a service worker `FetchEvent.request`.

Constructor
-----------

`Request()`

Creates a new `Request` object.

Instance properties
-------------------

`Request.body` Read only 

A `ReadableStream` of the body contents.

`Request.bodyUsed` Read only 

Stores `true` or `false` to indicate whether or not the body has been used in a request yet.

`Request.cache` Read only 

Contains the cache mode of the request (e.g., `default`, `reload`, `no-cache`).

`Request.credentials` Read only 

Contains the credentials of the request (e.g., `omit`, `same-origin`, `include`). The default is `same-origin`.

`Request.destination` Read only 

A string describing the type of content being requested.

`Request.headers` Read only 

Contains the associated `Headers` object of the request.

`Request.integrity` Read only 

Contains the subresource integrity value of the request (e.g., `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).

`Request.method` Read only 

Contains the request's method (`GET`, `POST`, etc.)

`Request.mode` Read only 

Contains the mode of the request (e.g., `cors`, `no-cors`, `same-origin`, `navigate`.)

`Request.redirect` Read only 

Contains the mode for how redirects are handled. It may be one of `follow`, `error`, or `manual`.

`Request.referrer` Read only 

Contains the referrer of the request (e.g., `client`).

`Request.referrerPolicy` Read only 

Contains the referrer policy of the request (e.g., `no-referrer`).

`Request.signal` Read only 

Returns the `AbortSignal` associated with the request

`Request.url` Read only 

Contains the URL of the request.

Instance methods
----------------

`Request.arrayBuffer()`

Returns a promise that resolves with an `ArrayBuffer` representation of the request body.

`Request.blob()`

Returns a promise that resolves with a `Blob` representation of the request body.

`Request.clone()`

Creates a copy of the current `Request` object.

`Request.formData()`

Returns a promise that resolves with a `FormData` representation of the request body.

`Request.json()`

Returns a promise that resolves with the result of parsing the request body as `JSON`.

`Request.text()`

Returns a promise that resolves with a text representation of the request body.


**Note:** The request body functions can be run only once; subsequent calls will reject with TypeError showing that the body stream has already used.

Examples
--------

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


```js
const request = new Request("https://www.mozilla.org/favicon.ico");

const url = request.url;
const method = request.method;
const credentials = request.credentials;
```


You could then fetch this request by passing the `Request` object in as a parameter to a `fetch()` call, for example:


```js
fetch(request)
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  });
```


In the following snippet, we create a new request using the `Request()` constructor with some initial data and body content for an API request which need a body payload:


```js
const request = new Request("https://example.com", {
  method: "POST",
  body: '{"foo": "bar"}',
});

const url = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;
```


**Note:** The body can only be a `Blob`, an `ArrayBuffer`, a `TypedArray`, a `DataView`, a `FormData`, a `URLSearchParams`, a `ReadableStream`, or a `String` object, as well as a string literal, so for adding a JSON object to the payload you need to stringify that object.

You could then fetch this API request by passing the `Request` object in as a parameter to a `fetch()` call, for example and get the response:


```js
fetch(request)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("Something went wrong on API server!");
    }
  })
  .then((response) => {
    console.debug(response);
    // …
  })
  .catch((error) => {
    console.error(error);
  });
```

Specifications
--------------

| Specification |
| --- |
| Fetch Standard # request-class |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP