Baseline Widely available *
Note: This feature is available in Web Workers.
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
.
Request()
Creates a new Request
object.
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.
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.isHistoryNavigation
Read only
A boolean indicating whether the request is a history navigation.
Request.keepalive
Read only
Contains the request's keepalive
setting (true
or false
), 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.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.
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.bytes()
Returns a promise that resolves with a Uint8Array
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.
ExamplesIn 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 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 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 See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3