cover

Fetch API explicada

author photo

Héctorbliss

@hectorbliss


Mira el video si prefieres:

robot logo saying hello

No te quedes atrás: Actualízate

Suscríbete para recibir información sobre nuevos frameworks, updates, eventos, tips, hacks y más.

La plataforma, nombre con el que conocemos al grupo de navegadores que ejecutan las aplicaciones que escribimos con HTML, CSS y JS, nos ofrece una amplia gama de APIs, interfaces que nos permiten realizar de todo, desde trabajar con audio o el GPU (unidad de procesamiento gráfico), hasta conectarte con multiples servidores por medio de la Fetch API.

La manera más formal de describir lo que la Fetch API resuelve, podría ser:

Interfaz para conseguir recursos a través de la red o “fetching resources”.

Es importante no confundir la Fetch API con lo que se conoce como AJAX.

Que, curiosamente, tampoco es el nombre adecuado, pues Ajax es metodología, no tecnología, te dejo un link por si quieres saber más.

La Fetch API es un reemplazo de la anterior: XMLHttpRequest o XHR.

Este nombre también es poco afortunado, pues XHR puede conseguir cualquier tipo de dato, no solo XML.

La Fetch API nos ofrece una interfaz moderna y simplificada, que solo utiliza un par de objetos:

Request y Response.

Aprender a utilizar la Fetch API es una muy buena inversión en capital intelectual, es muy saludable para tu carrera. Así que ven conmigo, aprendamos cómo funciona. 🙋🏻

¿Cómo funciona fetch?

fetch() Es un método global, eso significa que está disponible en el entorno de ejecución de todos los navegadores compatibles, que son prácticamente todos, incluyendo a Node.js.

compatibility

Esta amplia compatibilidad es justo lo que la convierte en una herramienta muy importante.

Entonces, con fetch() podemos hacer una solicitud de recursos. Es decir, podemos conectarnos a un servidor a través de la red y conseguir datos, en multiples formatos, incluso se pueden realizar conexiones semipermanentes con WebSockets.

El método fetch() toma un argumento obligatorio; la ruta de acceso al recurso.

fetch() Devuelve una Promise que se resuelve en un Response, aunque exista un error, siempre se recibirá un objeto Response.

fetch() Es configurable a través de un segundo parámetro, un objeto donde se pueden configurar las cabeceras de la petición.

Para entender mejor esto, yo suelo imaginarme que la comunicación que se realiza con fetch(), se hace: intercambiando cajas cerradas, como en un intercambio de regalos, no sabes qué traerá dentro el tuyo, pero sabes que recibirás uno. Esta es también la diferencia principal entre fetch y el JQuery.ajax(). Con fetch() siempre recibiremos un Response.

Una vez que la promesa se resuelve en Response, es momento de enfrentarnos al mundo de los tipos y estructuras, pues existe una amplia gama de opciones para definir el contenido del body (o cuerpo) del Response, podemos recibir blobs, streams, o formData.

Podemos decir que esta API hace una abstracción de HTTP hacia objetos JavaScript.

Haciendo fácil usar este protocolo.

Pero por ahora, vamos despacio, para disfrutar el paisaje. 🏡☺️

¿Cómo lo utilizo?

La petición básica es algo así de simple:

fetch('https://example.com/blissmo')

El string de la URL es realmente el único dato que necesitamos, si tu servidor devuelve una respuesta con status positivo, un 200 por ejemplo, el objeto Response tendrá una llave ok:true y sería false, si fuera un status 500 por ejemplo.

No está de más que le des una memorizada a los códigos de estado de HTTP.

fetch('https://example.com/blissmo') .then(response => response.json()) .then(data => console.log(data))
  1. Cuando el objeto response está disponible, se solicita el archivo JSON.
  2. Cuando los datos están listos, recibimos un objeto.

Este puede que sea una de las razones del porqué cuando somos principiantes preferimos usar herramientas de más alto nivel, para evitar este pequeño paso de extracción del JSON a partir de un objeto Response.

Pero ¡hey!, fetch() es tan importante en la web, que vale la pena no abstraerla de tus habilidades. 🛡️🗡️

Veamos un par de ejemplos

En este primer ejemplo, quiero mostrarte algunas de las muchas configuraciones que tenemos disponibles.

// Ejemplo implementando el metodo POST: type Data = { answer: string; }; async function postData(url: string, data: Data): Promise<Data> { 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", // multipart/form-data // '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), // El body cambia su formato en función del "Content-Type" header }); return response.json(); // parses JSON response into native JavaScript objects } // Esta es la parte bonita, la que usas fuera de la abstracción 🤓 // Esta es tu propia creación, tu propia mini-API. 👶🏻 Aquí, tú decides. 😎 postData("https://example.com/answer", { answer: "The answer is not 42, is: tacos 🌮", }).then((data) => { console.log(data); // Objeto JSON ya parseado. });

No es mi intención marearte con este ejemplo, solo mostrarte una vista más amplia de todas las cosas que puedes configurarle a un fetch().

Como son los verbos HTTP, la configuración de cors, la memoria cache, las credenciales, el comportamiento de redireccionamiento, sin lograr incluir en esta descripción, todas las cabeceras que podemos usar, pero te dejo un enlace.

Pero para no quedarnos con las ganas de tirar algo de código y mirar más de cerca a fetch(), vamos a consumir una API pública que devuelve los personajes de la caricatura gringa de moda: Rick y Morty.

const mortyMagic = async () => { const response = await fetch('https://rickandmortyapi.com/api/character'); const data = await response.json(); const chars = data.results document.body.remove(); chars.forEach(char=>{ const img = document.createElement('img'); img.src=char.image; document.documentElement.appendChild(img); }); }

En esta función llamada mortyMagic, hemos hecho una petición al path o url de la API. Esperamos el objeto Response, para luego esperar los datos en formato JSON.

Una vez que ambas esperas han concluido, estamos listos para trabajar con los datos que vienen en el cuerpo de la respuesta, las llaves que traiga dentro, como en este caso results, va a depender siempre del autor del API y de sus objetivos particulares.

Nosotros hemos utilizado la imagen del personaje que se incluye en los datos, para llenar el navegador de seres multidimensionales. 👽

Aprender a usar la Fetch API solo con JavaScript es una gran apuesta para tu futuro profesional.

Además de que te da una visión más amplia de como funciona la web, que si aprendieras primero un framework. 🧠

No dejes de decirme si te gustaría aprender más a fondo la Fetch API o si te gustaría verme construir una app real con esta API. Yo feliz. 🤓

Abrazo. Bliss.

Enlaces relacionados

WebSockets

https://developer.mozilla.org/es/docs/Web/API/WebSockets_API

AJAX

https://developer.mozilla.org/es/docs/Web/Guide/AJAX

Cabeceras

https://developer.mozilla.org/en-US/docs/Web/API/Headers

HTTP codes

https://developer.mozilla.org/es/docs/Web/HTTP/Status

banner

¿Quieres mantenerte al día sobre los próximos cursos y eventos?

Suscríbete a nuestro newsletter

Jamás te enviaremos spam, nunca compartiremos tus datos y puedes cancelar tu suscripción en cualquier momento 😉

robot logo saying hello
facebook icontwitter iconlinkedin iconinstagram iconyoutube icon

© 2016 - 2023 Fixtergeek