--- title: WindowOrWorkerGlobalScope.fetch() slug: Web/API/fetch tags: - API - Experimental - Fetch - Fetch API - GlobalFetch - Petición - Referencia - metodo - solicitud translation_of: Web/API/WindowOrWorkerGlobalScope/fetch original_slug: Web/API/WindowOrWorkerGlobalScope/fetch ---
{{APIRef("Fetch API")}}

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

Tanto {{domxref("Window")}} como {{domxref("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 {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} se rechaza con un {{jsxref("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 {{domxref("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 {{domxref("Request.Request","Request()")}}.

Sintaxis

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

Parámetros

input
Define el recurso que se quiere solicitar. Puede ser:
init {{optional_inline}}
Objeto de opciones que contiene configuraciones para personalizar la solicitud. Estas opciones pueden ser:

Return value

Una {{domxref("Promise")}} que resuelve a un objeto {{domxref("Response")}}.

Excepciones

Tipo Descriptción
AbortError Se abortó la solicitud (mediante {{domxref("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 {{domxref("Request")}} usando el constructor pertinente, y realizamos una solicitud usando fetch(). Dado que estamos solicitando una imagen, ejecutamos {{domxref("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 {{htmlelement("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
{{SpecName('Fetch','#fetch-method','fetch()')}} {{Spec2('Fetch')}} Definida parcialmente en WindowOrWorkerGlobalScope en la especificación más reciente.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}} {{Spec2('Fetch')}} Definición inicial
{{SpecName('Credential Management')}} {{Spec2('Credential Management')}} Añade una instancia de {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} como valor posible para init.credentials.

Compatibilidad con navegadores

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

Ver también