La API Fetch proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.
-
-
-
-
Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el foro de discusión de MDN, o Mozilla IRC (#mdn room.)
-
-
-
En pocas palabras
-
-
En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.
-
-
Service Workers es un ejemplo de una API que hace un fuerte uso de Fetch.
-
-
Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}.
-
-
Guard
-
-
Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles immutable, request, request-no-cors, response, o none, dependiendo de donde el encabezado es usado.
-
-
Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a none (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación:
-
-
-
-
-
nuevo tipo de objeto
-
creando el constructor
-
configuraciones de guarda (guard) del objeto {{domxref("Headers")}} asociado
-
-
-
-
-
{{domxref("Request")}}
-
{{domxref("Request.Request","Request()")}}
-
request
-
-
-
{{domxref("Request.Request","Request()")}} con {{domxref("Request.mode","mode")}} de no-cors
-
request-no-cors
-
-
-
{{domxref("Response")}}
-
{{domxref("Response.Response","Response()")}}
-
response
-
-
-
Métodos {{domxref("Response.error","error()")}} o {{domxref("Response.redirect","redirect()")}}
-
immutable
-
-
-
-
-
Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un TypeError es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es immutable. Sin embargo, la operación funcionará si
-
-
-
guard es request y el nombre del encabezado no es un {{Glossary("forbidden header name")}} .
-
guard es request-no-cors y el encabezado nombre/valor es un {{Glossary("simple header")}} .
-
guard es response y el nombre del encabezado no es {{Glossary("forbidden response header name")}}.
-
diff --git a/files/es/web/api/fetch_api/basic_concepts/index.md b/files/es/web/api/fetch_api/basic_concepts/index.md
new file mode 100644
index 00000000000000..cac20f41918891
--- /dev/null
+++ b/files/es/web/api/fetch_api/basic_concepts/index.md
@@ -0,0 +1,70 @@
+---
+title: Conceptos básicos de Fetch
+slug: Web/API/Fetch_API/Basic_concepts
+translation_of: Web/API/Fetch_API/Basic_concepts
+original_slug: Web/API/Fetch_API/Conceptos_basicos
+---
+{{DefaultAPISidebar("Fetch API")}}
+
+La [API Fetch](/es/docs/Web/API/Fetch_API) proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.
+
+> **Nota:** Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el [foro de discusión de ](https://discourse.mozilla-community.org/c/mdn)[MDN](https://discourse.mozilla-community.org/c/mdn), o [Mozilla IRC](https://wiki.mozilla.org/IRC) (#mdn room.)
+
+## En pocas palabras
+
+En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.
+
+[Service Workers](/es/docs/Web/API/ServiceWorker_API) es un ejemplo de una API que hace un fuerte uso de Fetch.
+
+Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}.
+
+## Guard
+
+Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles `immutable`, `request`, `request-no-cors`, `response`, o `none`, dependiendo de donde el encabezado es usado.
+
+Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a `none` (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación:
+
+
+
+
+
nuevo tipo de objeto
+
creando el constructor
+
+ configuraciones de guarda (guard) del objeto
+ {{domxref("Headers")}} asociado
+
+
+
+
+
+
{{domxref("Request")}}
+
{{domxref("Request.Request","Request()")}}
+
request
+
+
+
+ {{domxref("Request.Request","Request()")}} con
+ {{domxref("Request.mode","mode")}} de no-cors
+
+
request-no-cors
+
+
+
{{domxref("Response")}}
+
{{domxref("Response.Response","Response()")}}
+
response
+
+
+
+ Métodos {{domxref("Response.error","error()")}} o
+ {{domxref("Response.redirect","redirect()")}}
+
+
immutable
+
+
+
+
+Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un `TypeError` es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es `immutable`. Sin embargo, la operación funcionará si
+
+- guard es `request` y el nombre del encabezado no es un {{Glossary("forbidden header name")}} .
+- guard es `request-no-cors` y el encabezado _nombre/valor_ es un {{Glossary("simple header")}} .
+- guard es `response` y el \_nombre \_del encabezado no es {{Glossary("forbidden response header name")}}.
diff --git a/files/es/web/api/fetch_api/index.html b/files/es/web/api/fetch_api/index.html
deleted file mode 100644
index 5e99abea2edae4..00000000000000
--- a/files/es/web/api/fetch_api/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Fetch API
-slug: Web/API/Fetch_API
-translation_of: Web/API/Fetch_API
----
-
{{DefaultAPISidebar("Fetch API")}}
- La API Fetch proporciona una interfaz para recuperar recursos (incluso a través de la red). Resultará familiar a cualquiera que haya usado {{domxref("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 {{domxref("Request")}} y {{domxref("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 {{domxref("GlobalFetch.fetch")}}. Se implementa en múltiples interfaces, específicamente {{domxref("Window")}} y {{domxref("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 {{domxref("Promise")}} que resuelve en {{domxref("Response")}} a esa petición, sea o no correcta. También puede pasar opcionalmente un objeto de opciones init como segundo argumento (ver {{domxref("Request")}}).
-
-
Una vez que {{domxref("Response")}} es recuperada, hay varios métodos disponibles para definir cuál es el contenido del cuerpo y como se debe manejar (ver {{domxref("Body")}}).
-
-
Puede crear una solicitud y respuesta directamente a con los constructores {{domxref("Request.Request","Request()")}} y {{domxref("Response.Response","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, {{domxref("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 {{domxref("AbortController")}} y {{domxref("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
-
-
-
{{domxref("GlobalFetch")}}
-
Contiene el método fetch() utilizado para obtener o inicializar un recurso.
-
{{domxref("Headers")}}
-
Representa los encabezados de la respuesta/solicitud, lo que le permite consultar y tomar diferentes acciones en función de los resultados.
-
{{domxref("Request")}}
-
Representa una solicitud de recursos.
-
{{domxref("Response")}}
-
Representa la respuesta a una solicitud.
-
-
-
Fetch mixin
-
-
-
{{domxref("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.
diff --git a/files/es/web/api/fetch_api/index.md b/files/es/web/api/fetch_api/index.md
new file mode 100644
index 00000000000000..46aac9213e8caf
--- /dev/null
+++ b/files/es/web/api/fetch_api/index.md
@@ -0,0 +1,61 @@
+---
+title: Fetch API
+slug: Web/API/Fetch_API
+translation_of: Web/API/Fetch_API
+browser-compat: api.fetch
+---
+{{DefaultAPISidebar("Fetch API")}}
+La API Fetch proporciona una interfaz para recuperar recursos (incluso a través de la red). Resultará familiar a cualquiera que haya usado {{domxref("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 {{domxref("Request")}} y {{domxref("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 {{domxref("GlobalFetch.fetch")}}. Se implementa en múltiples interfaces, específicamente {{domxref("Window")}} y {{domxref("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 {{domxref("Promise")}} que resuelve en {{domxref("Response")}} a esa petición, sea o no correcta. También puede pasar opcionalmente un objeto de opciones init como segundo argumento (ver {{domxref("Request")}}).
+
+Una vez que {{domxref("Response")}} es recuperada, hay varios métodos disponibles para definir cuál es el contenido del cuerpo y como se debe manejar (ver {{domxref("Body")}}).
+
+Puede crear una solicitud y respuesta directamente a con los constructores {{domxref("Request.Request","Request()")}} y {{domxref("Response.Response","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, {{domxref("FetchEvent.respondWith")}} desde los operadores de servicios).
+
+> **Nota:** Puede encontrar mas información sobre las características de la API Fetch en [Usando Fetch](/es/docs/Web/API/Fetch_API/Using_Fetch), y aprender los conceptos en [Fetch: conceptos básicos](/es/docs/Web/API/Fetch_API/Basic_concepts).
+
+### Abortar una petición
+
+Los navegadores han empezado a añadir soporte experimental para las interfaces {{domxref("AbortController")}} y {{domxref("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
+
+- {{domxref("GlobalFetch")}}
+ - : Contiene el método `fetch()` utilizado para obtener o inicializar un recurso.
+- {{domxref("Headers")}}
+ - : Representa los encabezados de la respuesta/solicitud, lo que le permite consultar y tomar diferentes acciones en función de los resultados.
+- {{domxref("Request")}}
+ - : Representa una solicitud de recursos.
+- {{domxref("Response")}}
+ - : Representa la respuesta a una solicitud.
+
+## Fetch mixin
+
+- {{domxref("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
+
+{{Specifications}}
+
+## Compatibilidad de navegadores
+
+{{Compat}}
+
+## Ver también
+
+- [ServiceWorker API](/es/docs/Web/API/ServiceWorker_API)
+- [HTTP access control (CORS)](/es/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/es/docs/Web/HTTP)
+- [Fetch polyfill](https://github.com/github/fetch)
+- [Fetch basic concepts](/es/docs/Web/API/Fetch_API/Basic_concepts)
+- [Fetch API Examples](http://davidwalsh.name/fetch)
diff --git a/files/es/web/api/fetch_api/using_fetch/index.html b/files/es/web/api/fetch_api/using_fetch/index.html
deleted file mode 100644
index 8c38437996f253..00000000000000
--- a/files/es/web/api/fetch_api/using_fetch/index.html
+++ /dev/null
@@ -1,365 +0,0 @@
----
-title: Uso de Fetch
-slug: Web/API/Fetch_API/Using_Fetch
-tags:
- - API
- - BODY
- - Experimental
- - Fetch
- - Guía
- - HTTP
- - Petición
- - Promesa
- - Promise
- - Respuesta
-translation_of: Web/API/Fetch_API/Using_Fetch
-original_slug: Web/API/Fetch_API/Utilizando_Fetch
----
-
La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.
-
-
-
Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.
-
-
La especificación fetch difiere de JQuery.ajax() en dos formas principales:
-
-
-
-
El objeto Promise devuelto desde fetch()no será rechazado con un estado de error HTTP incluso si la respuesta es un error HTTP 404 o 500. En cambio, este se resolverá normalmente (con un estado ok configurado a false), y este solo sera rechazado ante un fallo de red o si algo impidió completar la solicitud.
-
-
Por defecto, fetch no enviará ni recibirá cookies del servidor, resultando en peticiones no autenticadas si el sitio permite mantentener una sesión de usuario (para mandar cookies, credentials de la opción init deberan ser configuradas). Desde el 25 de agosto de 2017. La especificación cambió la politica por defecto de las credenciales a same-origin. Firefox cambió desde la versión 61.0b13.
-
-
-
Una petición básica de fetch es realmente simple de realizar. Eche un vistazo al siguente código:
Aquí estamos recuperando un archivo JSON a través de red e imprimiendo en la consola. El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.
-
-
Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el mixin de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).
-
-
-
Nota: El mixin de Body tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease Body para más información.
-
-
-
Las peticiones de Fetch son controladas por la directiva de connect-src de Content Security Policy en vez de la directiva de los recursos que se han devuelto.
-
-
Suministrando opciones de petición
-
-
El método fetch() puede aceptar opcionalmente un segundo parámetro, un objeto init que permite controlar un numero de diferentes ajustes:
-
-
Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.
-
-
// Ejemplo implementando el metodo POST:
-async function postData(url = '', data = {}) {
- // Opciones por defecto estan marcadas con un *
- const response = await fetch(url, {
- method: 'POST', // *GET, POST, PUT, DELETE, etc.
- mode: 'cors', // no-cors, *cors, same-origin
- cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
- credentials: 'same-origin', // include, *same-origin, omit
- headers: {
- 'Content-Type': 'application/json'
- // 'Content-Type': 'application/x-www-form-urlencoded',
- },
- redirect: 'follow', // manual, *follow, error
- referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
- body: JSON.stringify(data) // body data type must match "Content-Type" header
- });
- return response.json(); // parses JSON response into native JavaScript objects
-}
-
-postData('https://example.com/answer', { answer: 42 })
- .then(data => {
- console.log(data); // JSON data parsed by `data.json()` call
- });
-
-
Tenga en cuenta que mode: "no-cors" solo permite un conjunto limitado de encabezados en la solicitud:
-
-
-
Accept
-
Accept-Language
-
Content-Language
-
Content-Type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain
-
-
-
Comprobando que la petición es satisfactoria
-
-
Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición fetch() es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor true que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:
-
-
fetch('flores.jpg').then(function(response) {
- if(response.ok) {
- response.blob().then(function(miBlob) {
- var objectURL = URL.createObjectURL(miBlob);
- miImagen.src = objectURL;
- });
- } else {
- console.log('Respuesta de red OK pero respuesta HTTP no OK');
- }
-})
-.catch(function(error) {
- console.log('Hubo un problema con la petición Fetch:' + error.message);
-});
-
-
Proporcionando tu propio objeto Request
-
-
En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método fetch(), puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método fetch():
Request() acepta exactamente los mismos parámetros que el método fetch(). Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:
-
-
var anotherRequest = new Request(myRequest, myInit);
-
-
Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de init. La copia debe estar hecha antes de la lectura del <body>, y leyendo el <body> en la copia, se marcará como leido en la petición original.
-
-
-
Nota: Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que clone() no.
-
-
-
Enviar una petición con credenciales incluido
-
-
Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos credentials: 'include' en el el objeto init que se pasa al método fetch().
Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade credentials: 'same-origin'.
-
-
// El script fué llamado desde el origen 'https://example.com'
-
-fetch('https://example.com',{
- credentials:'same-origin'
-})
-
-
Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa credentials: 'omit'.
Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .
-
-
var url ='https://example.com/profile';
-var data ={username:'example'};
-
-fetch(url,{
- method:'POST',// or 'PUT'
- body: JSON.stringify(data),// data can be `string` or {object}!
- headers:{
- 'Content-Type':'application/json'
- }
-}).then(res => res.json())
-.catch(error => console.error('Error:', error))
-.then(response => console.log('Success:', response));
-
-
Enviando un archivo
-
-
Los archivos pueden ser subido mediante el HTML de un elemento input <input type="file" />, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.
La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:
-
-
var content = "Hello World";
-var myHeaders = new Headers();
-myHeaders.append("Content-Type", "text/plain");
-myHeaders.append("Content-Length", content.length.toString());
-myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
-
-
Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:
Algunas de estas operaciones solo serán utiles en {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API para manipular headers.
-
-
Todos los métodosde de headers lanzan un TypeError si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un TypeError si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:
-
-
var myResponse = Response.error();
-try {
- myResponse.headers.set("Origin", "http://mybank.com");
-} catch(e) {
- console.log("Cannot pretend to be a bank!");
-}
-
-
Un buen caso de uso para headers es comprobar cuando el tipo de contenido es correcto antes de que se procese:
-
-
fetch(myRequest).then(function(response) {
- var contentType = response.headers.get("content-type");
- if(contentType && contentType.indexOf("application/json") !== -1) {
- return response.json().then(function(json) {
- // process your JSON further
- });
- } else {
- console.log("Oops, we haven't got JSON!");
- }
-});
-
-
Guarda (Guard)
-
-
Desde que las cabeceras pueden ser enviadas en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.
-
-
Los valores posibles de guarda (guard) son:
-
-
-
none: valor por defecto.
-
request: Guarda para el objeto headers obtenido de la petición ({{domxref("Request.headers")}}).
-
request-no-cors: Guarda para un objeto headers obtenido desde una petición creada con {{domxref("Request.mode")}} a no-cors.
-
response: Guarda para una cabecera obetenida desde un respuesta ({{domxref("Response.headers")}}).
-
immutable: Mayormente utilizado para ServiceWorkers, produce un objeto headers de solo lectura.
-
-
-
-
Nota: No se debería añadir o establecer una petición a un objeto headers guardado con la cabecera Content-Length. De igual manera, insertar Set-Cookie en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.
-
-
-
Objetos Response
-
-
Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando fetch() es resuelto.
-
-
Las propiedades de response que usarás son:
-
-
-
{{domxref("Response.status")}} — Entero (por defecto con valor 200) que contiene el código de estado de las respuesta.
-
{{domxref("Response.statusText")}} — Cadena (con valor por defecto "OK"), el cual corresponde al mensaje del estado de código HTTP.
-
{{domxref("Response.ok")}} — Visto en uso anteriormente, es una clave para comprobar que el estado está dentro del rango 200-299 (ambos incluidos). Este devuelve un valor {{domxref("Boolean")}}, siendo true si lo anterior se cumple y false en otro caso.
-
-
-
Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}}, cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:
-
-
var myBody = new Blob();
-
-addEventListener('fetch', function(event) {
- event.respondWith(
- new Response(myBody, {
- headers: { "Content-Type" : "text/plain" }
- })
- );
-});
-
-
El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).
-
-
-
Nota: El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.
-
-
-
Body
-
-
Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:
-
-
-
{{domxref("ArrayBuffer")}}
-
{{domxref("ArrayBufferView")}} (Uint8Array y amigos)
-
{{domxref("Blob")}}/File
-
string
-
{{domxref("URLSearchParams")}}
-
{{domxref("FormData")}}
-
-
-
El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.
-
-
-
{{domxref("Body.arrayBuffer","arrayBuffer()")}}
-
{{domxref("Body.blob","blob()")}}
-
{{domxref("Body.json","json()")}}
-
{{domxref("Body.text","text()")}}
-
{{domxref("Body.formData","formData()")}}
-
-
-
Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.
-
-
Las peticiones body pueden ser establecidas pasando el parametro body:
-
-
var form = new FormData(document.getElementById('login-form'));
-fetch("/login", {
- method: "POST",
- body: form
-});
-
-
Tanto peticiones y respuestas (y por extensión la function fetch()), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad Context-Type de la cabecera si no es ha establecido una.
-
-
Detectar característica
-
-
Puedes comprobar si el navegador soporta la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:
-
-
if(self.fetch){
- // run my fetch request here
-}else{
- // do something with XMLHttpRequest?
-}
-
-
Polyfill
-
-
Para utilizar fetch() en un explorador no soportado, hay disponible un Fetch Polyfill que recrea la funcionalidad para navegadores no soportados.
diff --git a/files/es/web/api/fetch_api/using_fetch/index.md b/files/es/web/api/fetch_api/using_fetch/index.md
new file mode 100644
index 00000000000000..c9030ea81cdba1
--- /dev/null
+++ b/files/es/web/api/fetch_api/using_fetch/index.md
@@ -0,0 +1,365 @@
+---
+title: Uso de Fetch
+slug: Web/API/Fetch_API/Using_Fetch
+translation_of: Web/API/Fetch_API/Using_Fetch
+original_slug: Web/API/Fetch_API/Utilizando_Fetch
+browser-compat: api.fetch
+---
+{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}
+
+La [API Fetch](/es/docs/Web/API/Fetch_API) proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.
+
+Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.
+
+La especificación fetch difiere de `JQuery.ajax()` en dos formas principales:
+
+- El objeto Promise devuelto desde `fetch()` **no será rechazado con un estado de error HTTP** incluso si la respuesta es un error HTTP 404 o 500. En cambio, este se resolverá normalmente (con un estado `ok` configurado a false), y este solo sera rechazado ante un fallo de red o si algo impidió completar la solicitud.
+- Por defecto, `fetch` no enviará ni recibirá cookies del servidor, resultando en peticiones no autenticadas si el sitio permite mantentener una sesión de usuario (para mandar cookies, _credentials_ de la opción [init](/es/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters) deberan ser configuradas). Desde [el 25 de agosto de 2017](https://github.com/whatwg/fetch/pull/585). La especificación cambió la politica por defecto de las credenciales a `same-origin`. Firefox cambió desde la versión 61.0b13.
+
+Una petición básica de `fetch` es realmente simple de realizar. Eche un vistazo al siguente código:
+
+```
+fetch('http://example.com/movies.json')
+ .then(response => response.json())
+ .then(data => console.log(data));
+```
+
+Aquí estamos recuperando un archivo JSON a través de red e imprimiendo en la consola. El uso de `fetch()` más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.
+
+Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el [mixin](https://es.wikipedia.org/wiki/Mixin) de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).
+
+> **Nota:** El mixin de `Body` tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease [Body](#body) para más información.
+
+Las peticiones de Fetch son controladas por la directiva de `connect-src` de [Content Security Policy](/es/docs/Security/CSP/CSP_policy_directives) en vez de la directiva de los recursos que se han devuelto.
+
+### Suministrando opciones de petición
+
+El método `fetch()` puede aceptar opcionalmente un segundo parámetro, un objeto `init` que permite controlar un numero de diferentes ajustes:
+
+Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.
+
+```
+// Ejemplo implementando el metodo POST:
+async function postData(url = '', data = {}) {
+ // Opciones por defecto estan marcadas con un *
+ const response = await fetch(url, {
+ method: 'POST', // *GET, POST, PUT, DELETE, etc.
+ mode: 'cors', // no-cors, *cors, same-origin
+ cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+ credentials: 'same-origin', // include, *same-origin, omit
+ headers: {
+ 'Content-Type': 'application/json'
+ // 'Content-Type': 'application/x-www-form-urlencoded',
+ },
+ redirect: 'follow', // manual, *follow, error
+ referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+ body: JSON.stringify(data) // body data type must match "Content-Type" header
+ });
+ return response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData('https://example.com/answer', { answer: 42 })
+ .then(data => {
+ console.log(data); // JSON data parsed by `data.json()` call
+ });
+```
+
+Tenga en cuenta que `mode: "no-cors"` solo permite un conjunto limitado de encabezados en la solicitud:
+
+- `Accept`
+- `Accept-Language`
+- `Content-Language`
+- `Content-Type` with a value of `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain`
+
+### Comprobando que la petición es satisfactoria
+
+Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición `fetch()` es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor `true` que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:
+
+```js
+fetch('flores.jpg').then(function(response) {
+ if(response.ok) {
+ response.blob().then(function(miBlob) {
+ var objectURL = URL.createObjectURL(miBlob);
+ miImagen.src = objectURL;
+ });
+ } else {
+ console.log('Respuesta de red OK pero respuesta HTTP no OK');
+ }
+})
+.catch(function(error) {
+ console.log('Hubo un problema con la petición Fetch:' + error.message);
+});
+```
+
+### Proporcionando tu propio objeto Request
+
+En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método `fetch()`, puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método `fetch()`:
+
+```js
+var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+ headers: myHeaders,
+ mode: 'cors',
+ cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest)
+.then(function(response) {
+ return response.blob();
+})
+.then(function(myBlob) {
+ var objectURL = URL.createObjectURL(myBlob);
+ myImage.src = objectURL;
+});
+```
+
+`Request()` acepta exactamente los mismos parámetros que el método `fetch()`. Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:
+
+```js
+var anotherRequest = new Request(myRequest, myInit);
+```
+
+Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de `init`. La copia debe estar hecha antes de la lectura del \, y leyendo el \ en la copia, se marcará como leido en la petición original.
+
+> **Nota:** Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que `clone()` no.
+
+### Enviar una petición con credenciales incluido
+
+Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos` credentials: 'include'` en el el objeto `init` que se pasa al método `fetch()`.
+
+```js
+fetch('https://example.com', {
+ credentials: 'include'
+})
+```
+
+Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade `credentials: 'same-origin'`.
+
+```js
+// El script fué llamado desde el origen 'https://example.com'
+
+fetch('https://example.com', {
+ credentials: 'same-origin'
+})
+```
+
+Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa `credentials: 'omit'`.
+
+```js
+fetch('https://example.com', {
+ credentials: 'omit'
+})
+```
+
+### Enviando datos JSON
+
+Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .
+
+```js
+var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+ method: 'POST', // or 'PUT'
+ body: JSON.stringify(data), // data can be `string` or {object}!
+ headers:{
+ 'Content-Type': 'application/json'
+ }
+}).then(res => res.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+```
+
+### Enviando un archivo
+
+Los archivos pueden ser subido mediante el HTML de un elemento input ``, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.
+
+```js
+var formData = new FormData();
+var fileField = document.querySelector("input[type='file']");
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+ method: 'PUT',
+ body: formData
+})
+.then(response => response.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+```
+
+## Cabeceras
+
+La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:
+
+```js
+var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+```
+
+Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:
+
+```js
+myHeaders = new Headers({
+ "Content-Type": "text/plain",
+ "Content-Length": content.length.toString(),
+ "X-Custom-Header": "ProcessThisImmediately",
+});
+```
+
+Los contenidos pueden ser consultados o recuperados:
+
+```js
+console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
+```
+
+Algunas de estas operaciones solo serán utiles en {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API para manipular `headers`.
+
+Todos los métodosde de `headers` lanzan un `TypeError` si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un `TypeError` si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:
+
+```js
+var myResponse = Response.error();
+try {
+ myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+ console.log("Cannot pretend to be a bank!");
+}
+```
+
+Un buen caso de uso para `headers` es comprobar cuando el tipo de contenido es correcto antes de que se procese:
+
+```js
+fetch(myRequest).then(function(response) {
+ var contentType = response.headers.get("content-type");
+ if(contentType && contentType.indexOf("application/json") !== -1) {
+ return response.json().then(function(json) {
+ // process your JSON further
+ });
+ } else {
+ console.log("Oops, we haven't got JSON!");
+ }
+});
+```
+
+### Guarda (Guard)
+
+Desde que las cabeceras pueden ser enviadas en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.
+
+Los valores posibles de guarda (guard) son:
+
+- `none`: valor por defecto.
+- `request`: Guarda para el objeto headers obtenido de la petición ({{domxref("Request.headers")}}).
+- `request-no-cors`: Guarda para un objeto headers obtenido desde una petición creada con {{domxref("Request.mode")}} a `no-cors`.
+- `response`: Guarda para una cabecera obetenida desde un respuesta ({{domxref("Response.headers")}}).
+- `immutable`: Mayormente utilizado para ServiceWorkers, produce un objeto headers de solo lectura.
+
+> **Nota:** No se debería añadir o establecer una petición a un objeto headers _guardado_ con la cabecera `Content-Length`. De igual manera, insertar `Set-Cookie` en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.
+
+## Objetos Response
+
+Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando `fetch()` es resuelto.
+
+Las propiedades de response que usarás son:
+
+- {{domxref("Response.status")}} — Entero (por defecto con valor 200) que contiene el código de estado de las respuesta.
+- {{domxref("Response.statusText")}} — Cadena (con valor por defecto "OK"), el cual corresponde al mensaje del estado de código HTTP.
+- {{domxref("Response.ok")}} — Visto en uso anteriormente, es una clave para comprobar que el estado está dentro del rango 200-299 (ambos incluidos). Este devuelve un valor {{domxref("Boolean")}}, siendo `true` si lo anterior se cumple y `false` en otro caso.
+
+Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}}, cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:
+
+```js
+var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+ event.respondWith(
+ new Response(myBody, {
+ headers: { "Content-Type" : "text/plain" }
+ })
+ );
+});
+```
+
+El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).
+
+> **Nota:** El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.
+
+## Body
+
+Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:
+
+- {{domxref("ArrayBuffer")}}
+- {{domxref("ArrayBufferView")}} (Uint8Array y amigos)
+- {{domxref("Blob")}}/File
+- string
+- {{domxref("URLSearchParams")}}
+- {{domxref("FormData")}}
+
+El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.
+
+- {{domxref("Body.arrayBuffer","arrayBuffer()")}}
+- {{domxref("Body.blob","blob()")}}
+- {{domxref("Body.json","json()")}}
+- {{domxref("Body.text","text()")}}
+- {{domxref("Body.formData","formData()")}}
+
+Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.
+
+Las peticiones body pueden ser establecidas pasando el parametro body:
+
+```js
+var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+ method: "POST",
+ body: form
+});
+```
+
+Tanto peticiones y respuestas (y por extensión la function `fetch()`), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad `Context-Type` de la cabecera si no es ha establecido una.
+
+## Detectar característica
+
+Puedes comprobar si el navegador soporta la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:
+
+```js
+if (self.fetch) {
+ // run my fetch request here
+} else {
+ // do something with XMLHttpRequest?
+}
+```
+
+## Polyfill
+
+Para utilizar `fetch()` en un explorador no soportado, hay disponible un [Fetch Polyfill](https://github.com/github/fetch) que recrea la funcionalidad para navegadores no soportados.
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad en navegadores
+
+{{Compat}}
+
+## Vea también
+
+- [ServiceWorker API](/es/docs/Web/API/ServiceWorker_API)
+- [HTTP access control (CORS)](/es/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/es/docs/Web/HTTP)
+- [Fetch polyfill](https://github.com/github/fetch)
+- [Fetch examples on Github](https://github.com/mdn/fetch-examples/)