WindowOrWorkerGlobalScope.fetch()

El método fetch() del mixin WindowOrWorkerGlobalScope lanza el proceso de solicitud de un recurso de la red. Esto devuelve una promesa que resuelve al objeto Response que representa la respuesta a la solicitud realizada.

Tanto Window como WorkerGlobalScope implementan WorkerOrGlobalScope, por lo que el m√©todo fetch() est√° disponible en pr√°cticamente cualquier contexto desde el que se pueda necesitar solicitar un recurso.

Una promesa fetch() se rechaza con un TypeError cuando sucede un error en la red, aunque normalmente significa un tema de permisos o similar. Una comprobaci√≥n m√°s precisa de una solicitud con fetch() deber√≠a comprobar que la promesa se resuelve, y que la propiedad Response.ok tiene valor true. Un estatus HTTP 404 no constituye un error de red.

El m√©todo fetch() es controlado por la directiva connect-src de la Pol√≠tica de Seguridad de Contenido (Content Security Policy) en lugar de la directiva del recurso que se solicita.

Nota: Los par√°metros del m√©todo fetch() son ind√©nticos a los del constructor de Request().

Sintaxis

Promise<Response> fetch(input[, init]);

Par√°metros

input
Define el recurso que se quiere solicitar. Puede ser:
  • Un USVString con la URL del recurso a solicitar. Algunos navegadores aceptan los esquemas blob: y data:.
  • Un objeto Request.
init Optional
Objeto de opciones que contiene configuraciones para personalizar la solicitud. Estas opciones pueden ser:
  • method: El m√©todo de solicitud, p.ej., GET, POST.
  • headers: Cualquier cabecera que se quiera a√Īadir a la solicitud, contenidas en un objeto Headers o un objeto literal con valores ByteString.
  • body: Cualquier cuerpo que se quiera a√Īadir a la solicitud: puede ser un Blob, BufferSource, FormData, URLSearchParams, u objeto USVString. N√≥tese que las solicitudes con m√©todos GETHEAD no pueden tener cuerpo.
  • mode: El modo a usar en la solicitud, p.ej., cors, no-cors, o same-origin.
  • credentials: Las credenciales que se quieran utilizar para la solicitud: omit, same-origin, o include. Para enviar autom√°ticamente las cookies del dominio actual, debe indicarse esta opci√≥n. Desde Chrome 50, esta propiedad tambi√©n acepta una instancia de FederatedCredential o de PasswordCredential.
  • cache: El modo de cach√© a utilizar en la solicitud: default, no-store, reload, no-cache, force-cache, o only-if-cached.
  • redirect: El modo de redirecci√≥n a usar: follow (seguir redirecciones autom√°ticamente), error (abortar si sucede un error durante la redirecci√≥n), o manual (gestionar redirecciones manualmente). El valor por defecto en Chrome es follow (hasta la versi√≥n 46 era manual).
  • referrer: Un USVString que especifique no-referrerclient, o una URL. El valor por defecto es client.
  • referrerPolicy: Especifica el valor de la cabecera HTTP referer. Puede ser no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
  • integrity: Contiene el valor de integridad de subrecurso (subresource integrity) de la solicitud (p.ej., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
  • keepalive: La opci√≥n keepalive se puede usar para permitir que recurso dure m√°s que la p√°gina. Las solicitudes con el indicador keepalive son un reemplazo de la API Navigator.sendBeacon()
  • signal: Una instancia de objeto AbortSignal; permite comunicarse con con una solicitud vigente y abortarla si se desea via AbortController.

Return value

Una Promise que resuelve a un objeto Response.

Excepciones

Tipo Descriptción
AbortError Se abortó la solicitud (mediante AbortController.abort()).
TypeError Desde Firefox 43, fetch() lanza un TypeError si la URL tiene credenciales, como en http://usuario:clave@ejemplo.com.

Ejemplo

En el ejemplo de solicitud con Request (ver Fetch Request live) creamos un nuevo objeto Request usando el constructor pertinente, y realizamos una solicitud usando fetch(). Dado que estamos solicitando una imagen, ejecutamos Body.blob() en la respuesta para darle el tipo MIME correspondiente para que sea gestionada apropiadamente, luego creamos un objeto URL de ella para mostrarla en un elemento <img>.

var miImagen = document.querySelector('img');

var miSolicitud = new Request('flores.jpg');

fetch(miSolicitud).then(function(respuesta) {
  return respuesta.blob();
}).then(function(respuesta) {
  var objeto = URL.createObjectURL(respuesta);
  miImagen.src = objeto;
});

En el ejemplo de solicitud con inicializador y Request (ver Fetch Request init live) hacemos lo mismo pero adem√°s pasamos un objeto inicializador cuando invocamos el fetch():

var miImagen = document.querySelector('img');

var misCabeceras = new Headers();
misCabeceras.append('Content-Type', 'image/jpeg');

var miInicializador = { method: 'GET',
                        headers: misCabeceras,
                        mode: 'cors',
                        cache: 'default' };

var miSolicitud = new Request('flores.jpg');

fetch(miSolicitud,miInicializador).then(function(respuesta) {
  ...
});

N√≥tese que tambi√©n podr√≠amos pasar el objeto inicializador con el constructor de Request para conseguir el mismo efecto, p.ej.:

var miSolicitud = new Request('flores.jpg', miInicializador);

Tambi√©n se puede usar un objeto literal a modo de headers en init.

var miInicializador = { method: 'GET',
                        headers: {
                            'Content-Type': 'image/jpeg'
                        },
                        mode: 'cors',
                        cache: 'default' };

var myRequest = new Request('flowers.jpg', miInicializador);

Especificaciones

Especificación Estado Comentarios
Fetch
La definición de 'fetch()' en esta especificación.
Living Standard Definida parcialmente en WindowOrWorkerGlobalScope en la especificaci√≥n m√°s reciente.
Fetch
La definición de 'fetch()' en esta especificación.
Living Standard Definición inicial
Credential Management Level 1 Working Draft A√Īade una instancia de FederatedCredential o PasswordCredential como valor posible para init.credentials.

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también