W3cubDocs

/DOM

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, or manual.
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 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 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 Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

42.0

(Yes) 39 (39)
34[1]
No support

29
28[1]

No support
Request.integrity 45.0 ? No support No support
Request.redirect 46.0 ?
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support No support No support (Yes) 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

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Request