The Request
interface of the Fetch API represents a resource request.
You can create a new Request
object using the {{domxref("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 {{domxref("FetchEvent.request")}}.
Constructor
- {{domxref("Request.Request()")}}
- Creates a new
Request
object.
Properties
- {{domxref("Request.method")}} {{readonlyInline}}
- Contains the request's method (
GET
,POST
, etc.) - {{domxref("Request.url")}} {{readonlyInline}}
- Contains the URL of the request.
- {{domxref("Request.headers")}} {{readonlyInline}}
- Contains the associated {{domxref("Headers")}} object of the request.
- {{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
- Contains the context of the request (e.g.,
audio
,image
,iframe
, etc.) - {{domxref("Request.referrer")}} {{readonlyInline}}
- Contains the referrer of the request (e.g.,
client
). - {{domxref("Request.referrerPolicy")}} {{readonlyInline}}
- Contains the referrer policy of the request (e.g.,
no-referrer
). - {{domxref("Request.mode")}} {{readonlyInline}}
- Contains the mode of the request (e.g.,
cors
,no-cors
,same-origin
,navigate
.) - {{domxref("Request.credentials")}} {{readonlyInline}}
- Contains the credentials of the request (e.g.,
omit
,same-origin
). - {{domxref("Request.redirect")}} {{readonlyinline}}
- Contains the mode for how redirects are handled. It may be one of
follow
,error
, ormanual
. - {{domxref("Request.integrity")}} {{readonlyInline}}
- Contains the subresource integrity value of the request (e.g.,
sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=
). - {{domxref("Request.cache")}} {{readonlyInline}}
- Contains the cache mode of the request (e.g.,
default
,reload
,no-cache
).
Request
implements {{domxref("Body")}}, so it also has the following property available to it:
- {{domxref("Body.bodyUsed")}} {{readonlyInline}}
- Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.
Methods
- {{domxref("Request.clone()")}}
- Creates a copy of the current
Request
object.
Request
implements {{domxref("Body")}}, so it also has the following methods available to it:
- {{domxref("Body.arrayBuffer()")}}
- Returns a promise that resolves with an {{domxref("ArrayBuffer")}} representation of the request body.
- {{domxref("Body.blob()")}}
- Returns a promise that resolves with an {{domxref("Blob")}} representation of the request body.
- {{domxref("Body.formData()")}}
- Returns a promise that resolves with an {{domxref("FormData")}} representation of the request body.
- {{domxref("Body.json()")}}
- Returns a promise that resolves with an {{domxref("JSON")}} representation of the request body.
- {{domxref("Body.text()")}}
- Returns a promise that resolves with an {{domxref("USVString")}} (text) representation of the request body.
Note: The {{domxref("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('flowers.jpg'); var myURL = myRequest.url; // https://localhost:8000/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 {{domxref("GlobalFetch.fetch()")}} call, for example:
fetch(myRequest).then(function(response) { return response.blob(); }).then(function(response) { var objectURL = URL.createObjectURL(response); myImage.src = objectURL; });
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Fetch','#request-class','Request')}} | {{Spec2('Fetch')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support |
{{CompatChrome(42.0)}} |
{{CompatGeckoDesktop(39)}} 34[1] |
{{CompatNo}} |
29 |
{{CompatNo}} |
Request.integrity |
{{CompatChrome(45.0)}} | {{CompatNo}} | {{CompatNo}} | ||
Request.redirect |
{{CompatChrome(46.0)}} |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatChrome(42.0)}} |
Request.integrity |
{{CompatNo}} | {{CompatNo}} | {{CompatChrome(45.0)}} | |||||
Request.redirect |
{{CompatNo}} | {{CompatNo}} | {{CompatChrome(46.0)}} |