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
orfalse
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 issame-origin
. Request.destination
Read only-
Returns a string describing the request's destination. This is a string indicating 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
, ormanual
. 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 resolve with empty strings/ArrayBuffers.
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