Request
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The Request
interface of the Fetch API represents a resource request.
You can create a new Request
object using the Request.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.Request()
- Creates a new
Request
object.
Properties
Request.method
Read only- Contains the request's method (
GET
,POST
, etc.) Request.url
Read only- Contains the URL of the request.
Request.headers
Read only- Contains the associated
Headers
object of the request. Request.context
Read only- Contains the context of the request (e.g.,
audio
,image
,iframe
, etc.) 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.mode
Read only- Contains the mode of the request (e.g.,
cors
,no-cors
,same-origin
,navigate
.) Request.credentials
Read only- Contains the credentials of the request (e.g.,
omit
,same-origin
). Request.redirect
Read only- Contains the mode for how redirects are handled. It may be one of
follow
,error
, ormanual
. Request.integrity
Read only- Contains the subresource integrity value of the request (e.g.,
sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=
). Request.cache
Read only- Contains the cache mode of the request (e.g.,
default
,reload
,no-cache
).
Request
implements Body
, so it also has the following property available to it:
Body.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; next 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:
var myRequest = new Request('http://localhost/flowers.jpg'); var myURL = myRequest.url; // http://localhost/flowers.jpg var myMethod = myRequest.method; // GET var myCred = myRequest.credentials; // omit
You could then fetch this request by passing the Request
object in as a parameter to a GlobalFetch.fetch()
call, for example:
fetch(myRequest) .then(function(response) { return response.blob(); }) .then(function(response) { var objectURL = URL.createObjectURL(response); myImage.src = objectURL; });
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:
var myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'}); var myURL = myRequest.url; // http://localhost/api var myMethod = myRequest.method; // POST var myCred = myRequest.credentials; // omit var bodyUsed = myRequest.bodyUsed; // true
Note: The body type only can be a Blob
, BufferSource
, FormData
, URLSearchParams
, USVString
or ReadableStream
type, so for adding a JSON object to the payload it need to be stringify that object.
You could then fetch this api request by passing the Request
object in as a parameter to a GlobalFetch.fetch()
call, for example and get the response:
fetch(myRequest) .then(function(response) { if(response.status == 200) return response.json(); else throw new Error('Something went wrong on api server!'); }) .then(function(response) { console.debug(response); // ... }) .catch(function(error) { console.error(error); });
Specifications
Specification | Status | Comment |
---|---|---|
Fetch The definition of 'Request' in that specification. |
Living Standard | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support |
42.0 |
39 (39) 34[1] |
No support |
29 |
No support |
Request.integrity |
45.0 | No support | No support | ||
Request.redirect |
46.0 |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support | No support | No support | 42.0 |
Request.integrity |
No support | No support | 45.0 | |||||
Request.redirect |
No support | No support | 46.0 |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/request