We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 properties available to it:

Body.body Read only
A simple getter used to expose a ReadableStream of the body contents.
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; 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 myRequest = new Request('http://localhost/flowers.jpg');

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const 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(response => response.blob())
  .then(blob => {
    myImage.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 myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
 
const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const 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(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
La definición de 'Request' en esta especificación.
Living Standard Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico42 Si39 No28 No
Request() constructor

42

411

15

39

342

No

29

283

10.1
cache No5 Si48 No No11
context42 — 46 ?39 — 426 No28 — 29 No
credentials

42

417

Si

39

342

No

29

283

No
headers

42

417

Si

39

342

No

29

283

No
integrity46 Si Si No Si No
keepalive6615 ? ?43 ?
method

42

417

Si

39

342

No

29

283

No
mode42 Si39 No29 No
redirect46 Si Si No Si No
referrer

42

417

Si47 No

29

283

No
referrerPolicy52 Si47 No ? No
url

42

417

Si

39

342

No

29

283

No
clone

42

417

Si

39

342

No

29

283

No
destination ? ? ? ? ? ?
signal ?16 ? ? ? ?
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico4242 Si Si28 No4.0
Request() constructor

42

411

42

411

Si Si No10.3

4.0

5.04

cache No No Si No No No No
context42 — 4642 — 46 ? No No No4.0
credentials No42 — 46 Si No No No4.0
headers No42 — 46 Si No No No4.0
integrity No46 Si No Si No5.0
keepalive No66 ? ?43 ? No
method No42 — 46 Si No No No4.0
mode4949 Si No No No5.0
redirect No46 Si Si Si No5.0
referrer No No Si No No No No
referrerPolicy ? ? Si ? No No ?
url No42 — 46 Si No No No4.0
clone No No Si No No No No
destination ? ? ? ? ? ? ?
signal ? ? ? ? ? ? ?

1. Some default values for the init parameter changed in Chrome 47. See the Properties section for details.

2. From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

4. Some default values for the init parameter changed in Samsung Internet 5.0. See the Properties section for details.

5. Nightly build

6. see bug 1188062 for more information.

7. From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: fscholz
Última actualización por: fscholz,