La API Fetch proporciona una interfaz para recuperar recursos (incluso a través de la red). Resultará familiar a cualquiera que haya usado XMLHttpRequest, pero la nueva API ofrece un conjunto de características más potente y flexible.

Conceptos y uso

Fetch ofrece una definición genérica de los objetos Request y Response (y otras cosas relacionadas con las solicitudes de red). Esto permitirá su uso donde sea necesario en un futuro, ya sea para operadores de servicios, API caché y otras cosas similares que manipulen o modifiquen las solicitudes y respuestas, o cualquier otro tipo de caso de uso que pudiera requerirle la generación de sus propias respuestas mediante programación.

También proporciona una definición para conceptos relacionados, como CORS y la semántica de encabezado HTTP origen, suplantando sus definiciones separadas en otros lugares.

Para hacer una solicitud y recuperar un recurso, utilice el método GlobalFetch.fetch. Se implementa en múltiples interfaces, específicamente Window y WorkerGlobalScope. Esto hace que esté disponible en casi cualquier contexto donde quiera buscar recursos.

El método fetch() toma un argumento obligatorio, la ruta de acceso al recurso que desea recuperar. Devuelve una Promise que resuelve en Response a esa petición, sea o no correcta. También puede pasar opcionalmente un objeto de opciones init como segundo argumento (ver Request).

Una vez que Response es recuperada, hay varios métodos disponibles para definir cuál es el contenido del cuerpo y como se debe manejar (ver Body).

Puede crear una solicitud y respuesta directamente a con los constructores Request() y Response(), pero no es recomendable hacerlo directamente. En su lugar, es preferible que sean creados como resultado de otras acciones de la API (por ejemplo, FetchEvent.respondWith desde los operadores de servicios).

Nota: Puede encontrar mas información sobre las características de la API Fetch en Usando Fetch, y aprender los conceptos en Fetch: conceptos básicos.

Abortar una petición

Los navegadores han empezado a añadir soporte experimental para las interfaces AbortController y AbortSignal (Conocidas también como La API Abort), las cuales permiten que operaciones como Fetch y XHR puedan ser abortadas si no han terminado todavía. Visita las páginas de las interfaces para más detalles.

Fetch Interfaces o Métodos

GlobalFetch
Contiene el método fetch() utilizado para obtener o inicializar un recurso.
Headers
Representa los encabezados de la respuesta/solicitud, lo que le permite consultar y tomar diferentes acciones en función de los resultados.
Request
Representa una solicitud de recursos.
Response
Representa la respuesta a una solicitud.

Fetch mixin

Body
Proporciona métodos relacionados con el contenido de la respuesta/solicitud, lo que le permite declarar cuál es su tipo y cómo debe manejarse.

Especificaciones

Especificación Estado Comentario
Fetch Living Standard Definición inicial

Compatibilidad de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básico
Experimental
Chrome Soporte completo 42Edge Soporte completo 14Firefox Soporte completo 39
Soporte completo 39
Soporte completo 34
Deshabilitado
Deshabilitado From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
Soporte completo 52
Notas
Notas fetch() now defined on WindowOrWorkerGlobalScope mixin.
IE Sin soporte NoOpera Soporte completo 29
Soporte completo 29
Soporte completo 28
Deshabilitado
Deshabilitado From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari Soporte completo 10WebView Android Soporte completo 42Chrome Android Soporte completo 42Edge Mobile Soporte completo 14Firefox Android Soporte completo 39
Soporte completo 39
Soporte completo 34
Deshabilitado
Deshabilitado From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
Soporte completo 52
Notas
Notas fetch() now defined on WindowOrWorkerGlobalScope mixin.
Opera Android ? Safari iOS Soporte completo 10Samsung Internet Android ?
Streaming response body
Experimental
Chrome Soporte completo 43Edge Soporte completo 14Firefox Soporte completo Si
Deshabilitado
Soporte completo Si
Deshabilitado
Deshabilitado This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 29Safari Soporte completo 10WebView Android Soporte completo 43Chrome Android Soporte completo 43Edge Mobile Soporte completo 14Firefox Android Sin soporte NoOpera Android Sin soporte NoSafari iOS Soporte completo 10Samsung Internet Android ?
Support for blob: and data:
Experimental
Chrome Soporte completo 48Edge Sin soporte NoFirefox ? IE Sin soporte NoOpera ? Safari ? WebView Android Soporte completo 43Chrome Android Soporte completo 43Edge Mobile Sin soporte NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
referrerPolicyChrome Soporte completo 52Edge Sin soporte NoFirefox Soporte completo 52IE Sin soporte NoOpera Soporte completo 39Safari Soporte completo 11.1WebView Android Soporte completo 52Chrome Android Soporte completo 52Edge Mobile Sin soporte NoFirefox Android Soporte completo 52Opera Android Soporte completo 39Safari iOS Sin soporte NoSamsung Internet Android ?
signal
Experimental
Chrome ? Edge ? Firefox Soporte completo 57IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Soporte completo 57Opera Android ? Safari iOS Sin soporte NoSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: PacoVela, SSantiago90, erpheus, AlePerez92, robermorales, jmcarnero, enlinea777
Última actualización por: PacoVela,