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.
Properties
Request.cache
Read only- Contains the cache mode of the request (e.g.,
default
,reload
,no-cache
). Request.context
Read only- Contains the context of the request (e.g.,
audio
,image
,iframe
, etc.) 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 from the
RequestDestination
enum 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.url
Read only- Contains the URL of the request.
Request
implements Body
, so it also inherits the following properties:
body
Read only- A simple getter used to expose a
ReadableStream
of the body contents. bodyUsed
Read only- Stores a
Boolean
that declares whether the body has been used in a response yet.
Methods
Request.clone()
- Creates a copy of the current
Request
object.
Request
implements Body
, so it also has the following methods available to it:
Body.arrayBuffer()
- Returns a promise that resolves with an
ArrayBuffer
representation of the request body. Body.blob()
- Returns a promise that resolves with a
Blob
representation of the request body. Body.formData()
- Returns a promise that resolves with a
FormData
representation of the request body. Body.json()
- Returns a promise that resolves with a
JSON
representation of the request body. Body.text()
- Returns a promise that resolves with an
USVString
(text) representation of the request body.
Note: The 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:
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 WindowOrWorkerGlobalScope.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: '{"foo": "bar"}'}); const url = request.url; const method = request.method; const credentials = request.credentials; const bodyUsed = request.bodyUsed;
Note: The body type can only be a Blob
, BufferSource
, FormData
, URLSearchParams
, USVString
or ReadableStream
type, 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 WindowOrWorkerGlobalScope.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
Specification | Status | Comment |
---|---|---|
Fetch The definition of 'Request' in that specification. |
Living Standard | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Request | Chrome
Full support
42
| Edge Full support ≤18 | Firefox
Full support
39
| IE No support No | Opera Full support 28 | Safari Full support 10.1 | WebView Android Full support 42 | Chrome Android
Full support
42
| Firefox Android
Full support
39
| Opera Android Full support 28 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
Request() constructor | Chrome
Full support
41
| Edge Full support 15 | Firefox
Full support
39
| IE No support No | Opera
Full support
29
| Safari Full support 10.1 | WebView Android
Full support
42
| Chrome Android
Full support
41
| Firefox Android
Full support
39
| Opera Android
Full support
29
| Safari iOS Full support 10.3 | Samsung Internet Android
Full support
4.0
|
cache | Chrome Full support 64 | Edge Full support 14 | Firefox Full support 48 | IE No support No | Opera Full support 51 | Safari Full support 11 | WebView Android Full support 64 | Chrome Android Full support 64 | Firefox Android No support No | Opera Android Full support 47 | Safari iOS No support No | Samsung Internet Android Full support 9.0 |
clone | Chrome
Full support
42
| Edge Full support 14 | Firefox
Full support
39
| IE No support No | Opera
Full support
29
| Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android
Full support
29
| Safari iOS No support No | Samsung Internet Android No support No |
context | Chrome No support 42 — 46 | Edge ? | Firefox
No support
39 — 42
| IE No support No | Opera No support 28 — 29 | Safari No support No | WebView Android No support 42 — 46 | Chrome Android No support 42 — 46 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support 4.0 — 5.0 |
credentials | Chrome
Full support
42
| Edge Full support 14 | Firefox
Full support
39
| IE No support No | Opera
Full support
29
| Safari Full support 10.1 | WebView Android Full support 42 | Chrome Android Full support 42 | Firefox Android Full support Yes | Opera Android
Full support
29
| Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
destination | Chrome Full support 65 | Edge Full support 14 | Firefox Full support 61 | IE No support No | Opera Full support 52 | Safari Full support 10.1 | WebView Android Full support 65 | Chrome Android Full support 65 | Firefox Android Full support 61 | Opera Android Full support 47 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 9.0 |
headers | Chrome
Full support
42
| Edge Full support 14 | Firefox
Full support
39
| IE No support No | Opera
Full support
29
| Safari No support No | WebView Android No support No | Chrome Android No support 42 — 46 | Firefox Android No support No | Opera Android
Full support
29
| Safari iOS No support No | Samsung Internet Android No support 4.0 — 5.0 |
integrity | Chrome Full support 46 | Edge Full support 14 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari No support No | WebView Android No support No | Chrome Android Full support 46 | Firefox Android No support No | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
keepalive | Chrome Full support 66 | Edge Full support 15 | Firefox ? | IE No support No | Opera Full support 43 | Safari No support No | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android ? | Opera Android Full support 43 | Safari iOS No support No | Samsung Internet Android Full support 9.0 |
method | Chrome
Full support
42
| Edge Full support 14 | Firefox
Full support
39
| IE No support No | Opera
Full support
29
| Safari No support No | WebView Android No support No | Chrome Android No support 42 — 46 | Firefox Android No support No | Opera Android
Full support
29
| Safari iOS No support No | Samsung Internet Android No support 4.0 — 5.0 |
mode | Chrome Full support 42 | Edge Full support 14 | Firefox Full support 39 | IE No support No | Opera Full support 29 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
redirect | Chrome Full support 46 | Edge Full support 14 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari No support No | WebView Android No support No | Chrome Android Full support 46 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
referrer | Chrome
Full support
42
| Edge Full support 14 | Firefox Full support 47 | IE No support No | Opera
Full support
29
| Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android
Full support
29
| Safari iOS No support No | Samsung Internet Android No support No |
referrerPolicy | Chrome Full support 52 | Edge Full support 14 | Firefox Full support 52 | IE No support No | Opera Full support 39 | Safari Full support 11.1 | WebView Android Full support 52 | Chrome Android Full support 52 | Firefox Android Full support 52 | Opera Android Full support 41 | Safari iOS No support No | Samsung Internet Android Full support 7.2 |
signal | Chrome Full support 66 | Edge Full support 16 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support 9.0 |
url | Chrome
Full support
42
| Edge Full support 14 | Firefox
Full support
39
| IE No support No | Opera
Full support
29
| Safari Full support 10.1 | WebView Android
Full support
42
| Chrome Android
Full support
42
| Firefox Android No support No | Opera Android
Full support
29
| Safari iOS Full support 10.3 | Samsung Internet Android
Full support
4.0
|
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.