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
Creates a new Request object.
Instance properties
Stores true or false to indicate whether or not the body has been used in a request yet.
Contains the cache mode of the request (e.g., default , reload , no-cache ).
Contains the credentials of the request (e.g., omit , same-origin , include ). The default is same-origin .
Returns a string describing the request’s destination. This is a string indicating the type of content being requested.
Contains the associated Headers object of the request.
Contains the subresource integrity value of the request (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE= ).
Contains the request’s method ( GET , POST , etc.)
Contains the mode of the request (e.g., cors , no-cors , same-origin , navigate .)
Contains the mode for how redirects are handled. It may be one of follow , error , or manual .
Contains the referrer of the request (e.g., client ).
Contains the referrer policy of the request (e.g., no-referrer ).
Returns the AbortSignal associated with the request
Contains the URL of the request.
Instance methods
Returns a promise that resolves with an ArrayBuffer representation of the request body.
Returns a promise that resolves with a Blob representation of the request body.
Creates a copy of the current Request object.
Returns a promise that resolves with a FormData representation of the request body.
Returns a promise that resolves with the result of parsing the request body as JSON .
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:
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:
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:
const request = new Request("https://example.com", method: "POST", body: '', >); 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:
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
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 10, 2023 by MDN contributors.
Your blueprint for a better internet.