Request

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2017⁩.

* Some parts of this feature may have varying levels of support.

Note: This feature is available inWeb Workers.

TheRequest interface of theFetch API represents a resource request.

You can create a newRequest object using theRequest() constructor, but you are more likely to encounter aRequest object being returned as the result of another API operation, such as a service workerFetchEvent.request.

Constructor

Request(): Creates a newRequest object.

Instance properties

Request.bodyRead only: AReadableStream of the body contents.
Request.bodyUsedRead only: Storestrue orfalse to indicate whether or not the body has been used in a request yet.
Request.cacheRead only: Contains the cache mode of the request (e.g.,default,reload,no-cache).
Request.credentialsRead only: Contains a value controlling whether credentials should be included with the request (e.g.,omit,same-origin,include). The default issame-origin.
Request.destinationRead only: A string describing the type of content being requested.
Request.duplexRead onlyExperimental: The duplex mode of the request, which determines whether the browser must send the entire request before processing the response.
Request.headersRead only: Contains the associatedHeaders object of the request.
Request.integrityRead only: Contains thesubresource integrity value of the request (e.g.,sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
Request.isHistoryNavigationRead only: A boolean indicating whether the request is a history navigation.
Request.keepaliveRead only: Contains the request'skeepalive setting (true orfalse), which indicates whether the browser will keep the associated request alive if the page that initiated it is unloaded before the request is complete.
Request.methodRead only: Contains the request's method (GET,POST, etc.)
Request.modeRead only: Contains the mode of the request (e.g.,cors,no-cors,same-origin,navigate.)
Request.redirectRead only: Contains the mode for how redirects are handled. It may be one offollow,error, ormanual.
Request.referrerRead only: Contains the referrer of the request (e.g.,client).
Request.referrerPolicyRead only: Contains the referrer policy of the request (e.g.,no-referrer).
Request.signalRead only: Returns theAbortSignal associated with the request
Request.urlRead only: Contains the URL of the request.

Instance methods

Request.arrayBuffer(): Returns a promise that resolves with anArrayBuffer representation of the request body.
Request.blob(): Returns a promise that resolves with aBlob representation of the request body.
Request.bytes(): Returns a promise that resolves with aUint8Array representation of the request body.
Request.clone(): Creates a copy of the currentRequest object.
Request.formData(): Returns a promise that resolves with aFormData representation of the request body.
Request.json(): Returns a promise that resolves with the result of parsing the request body asJSON.
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 theRequest() constructor (for an image file in the same directory as the script), then return some property values of the request:

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 theRequest object in as a parameter to afetch() call, for example:

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

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

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 aBlob, anArrayBuffer, aTypedArray, aDataView, aFormData, aURLSearchParams, aReadableStream, or aString 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 theRequest object in as a parameter to afetch() call, for example and get the response:

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