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.
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
, omanual
. 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:
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:
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:
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:
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 Standard # request-class |
Compatibilidad con navegadores
BCD tables only load in the browser