Request

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Some parts of this feature may have varying levels of support.

La interfaz Request de la API Fetch representa una solicitud de respuesta.

Puedes crear un nuevo objeto Request usando el constructor Request.Request(), pero es preferible encontrar un objeto Request que sea devuelto como el resultado de otra operacion API, como un operador de servicio FetchEvent.request.

Constructor

Request.Request()

Crea un nuevo objeto Request.

Propiedades

Request.method Read only

Contiene el metodo de solicitud (GET, POST, etc.)

Request.url Read only

Contiene la URL de la solicitud.

Request.headers Read only

Contiene el objeto asociado de la solicitud Headers

Request.context Read only Obsoleto

Contiene el contexto de la solicitud (p.ej., audio, image, iframe, etc.)

Request.referrer Read only

Contiene la referencia de la soliditud (p.ej., client).

Request.referrerPolicy Read only

Contiene la política de referencia de la solicitud (p.ej., no-referrer).

Request.mode Read only

Contiene el modo de la solicitud. (p.ej., cors, no-cors, same-origin, navigate.)

Request.credentials Read only

Contiene las credenciales de la solicitud (p.ej., omit, same-origin).

Request.redirect Read only

Contiene el modo de cómo son manipuladas las redirecciones. Puede ser follow, error, o manual.

Request.integrity Read only

Contiene el valor del subrecurso de integridad (subresource integrity) de la solicitud (p.ej., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Request.cache Read only

Contiene el modo de caché de la solicitud (p.ej., default, reload, no-cache).

Request implementa Body, por lo que también tiene las siguientes propiedades disponibles:

Body.body Read only

Un simple getter usado para exponer un contenido del cuerpo ReadableStream

Body.bodyUsed Read only

Almacena un Boolean que declara si ya se ha usado el cuerpo en una respuesta.

Métodos

Request.clone()

Crea una copia del objeto actual Request.

Request implementa Body, por lo que también tiene los siguientes métodos disponibles:

Body.arrayBuffer()

Devuelve una promesa que se resuelve con una representación ArrayBuffer del cuerpo de la solicitud.

Body.blob()

Devuelve una promesa que se resuelve con una representación Blob del cuerpo de la solicitud.

Body.formData()

Devuelve una promesa que se resuelve con una representación FormData del cuerpo de la solicitud.

Body.json()

Devuelve una promesa que se resuelve con una representación JSON del cuerpo de la solicitud.

Body.text()

Devuelve una promesa que se resuelve con una representación USVString (text) del cuerpo de la solicitud.

Nota: Las funciones Body solo pueden ser ejecutadas una vez; Las siguientes llamadas se resolverán con strings/ArrayBuffers vacíos.

Ejemplos

En el siguiente fragmento de código, creamos una nueva solicitud utilizando el constructor Request() (para un archivo de imagen en el mismo directorio que el script), luego devolvemos algunos valores de propiedad de la solicitud:

js
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

Puede obtener esta solicitud pasando el objeto Request como parámetro a una llamada GlobalFetch.fetch(), por ejemplo:

js
fetch(myRequest)
  .then((response) => response.blob())
  .then((blob) => {
    myImage.src = URL.createObjectURL(blob);
  });

En el siguiente fragmento de código, creamos una nueva solicitud utilizando el constructor Request() con algunos datos iniciales y contenido del cuerpo para una solicitud de API que necesita una carga útil del cuerpo:

js
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

Nota: El tipo de cuerpo solo puede ser Blob, BufferSource, FormData, URLSearchParams, USVString o tipo ReadableStream, así que para añadir un objeto JSON a la carga útil, necesitas convertir a string (stringify) dicho objeto.

Puede obtener esta solicitud de API pasando el objeto Request como parámetro a una llamada GlobalFetch.fetch(), por ejemplo, y obtener la respuesta:

js
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);
  });

Especificaciones

Specification
Fetch
# request-class

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Request
Request() constructor
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object.
init.attributionReporting parameter
Experimental
init.browsingTopics parameter
ExperimentalNon-standard
init.duplex parameter
Experimental
init.keepalive parameter
init.priority parameter
init.referrer parameter
Send ReadableStream in request body
Experimental
Consume ReadableStream as a response body
arrayBuffer
blob
body
bodyUsed
bytes
cache
cache.only-if-cached
clone
credentials
Default value same-origin
destination
duplex
Experimental
formData
headers
integrity
isHistoryNavigation
json
keepalive
method
mode
navigate mode
redirect
referrer
referrerPolicy
signal
targetAddressSpace
Experimental
text
url

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

Ver también