En el mundo del desarrollo web, toda página tiene conexiones con otras fuentes de datos, normalmente API construidas para el propio proyecto. Para establecer comunicación con las diversas fuentes de datos de un proyecto, usamos peticiones HTTP. En este post, te enseñaremos qué son y cómo funcionan las peticiones HTTP con Fetch, una herramienta complementaria a la librería Axios.
¿Qué es Fetch?
Para entender cómo funcionan las peticiones HTTP con Fetch, primero debemos entender esta herramienta. Fetch es una herramienta similar a la librería Axios para JavaScript, porque nos permite pedir datos a una URL, es decir, hacer peticiones HTTP. La diferencia principal es que Fetch se implementa de forma nativa dentro del navegador.
Como puedes leer en nuestro post sobre el Browser Object Model, el BOM es un concepto que reúne una serie de utilidades para controlar y consultar propiedades del navegador desde nuestro código JavaScript. Fetch es uno de los métodos que pone a nuestra disposición el BOM.
El método Fetch logra hacer peticiones HTTP del mismo modo que lo haría Axios. En este sentido, es como el primo de Axios para el desarrollo frontend. Sin embargo, si quieres conocer exactamente qué distingue estas dos herramientas y saber cuál deberías usar, te invitamos a leer nuestro post sobre Fetch o Axios. Además, si quieres conocer más sobre Fetch, te invitamos a leer el artículo sobre el uso de Fetch en la MDN.
¿Cómo funcionan las peticiones HTTP con Fetch?
Desde el navegador, podemos realizar peticiones HTTP a servidores usando el API de Fetch, que se basa en promesas. Es decir, las peticiones HTTP con Fetch nos devuelven una promesa. Esto se debe a que las peticiones de este tipo son un proceso asíncrono y, como puedes leer en nuestro post sobre las promesas en frontend JavaScript, las promesas son el modo de controlar procesos asíncronos en este lenguaje de programación.
Entonces, como no sabemos cuánto tiempo se demorará nuestra petición, controlaremos este proceso con una promesa. Esto quiere decir que podremos usar los métodos then (cuando la promesa se resuelve) y catch (cuando la promesa nos devuelva un error, un rechazo) para definir lo que se hará en cada caso.
Normalmente, la sintaxis de promesas en JavaScript nos dice que también usemos los métodos resolve y reject para establecer qué es una promesa resuelta y una rechazada. Debemos tener presente que, en este contexto, Fetch está haciendo este trabajo por nosotros. Es decir, Fetch es el productor de la promesa y nosotros estamos actuando como consumidores.
A continuación, te mostramos un ejemplo en el que controlamos una petición Fetch con dos métodos then encadenados:
fetch (‘https://jsonplaceholder.typicode.com/todos’)
.then (response => response.json ( ))
.then (data => console.log (data));
Como puedes ver en las líneas de código anteriores, las peticiones HTTP con Fetch se hacen por medio de su parámetro. Es decir, pondremos la URL de la API a la que queremos hacer una petición en los paréntesis del método fetch. Luego, como esto devuelve una promesa, podemos controlar la petición con el método then.
En el ejemplo anterior, estamos diciendo que, si la promesa se resuelve, transformaremos los datos de la respuesta a formato JSON. Luego, como el método .json también nos devuelve una promesa, podemos controlar esta respuesta con otro método then. Por lo tanto, cuando la promesa de la transformación a .json se resuelva, pintaremos en pantalla los datos con un console.log. En este sentido, estamos concatenando dos métodos gracias a que ambos devuelven una promesa.
Concatenar métodos en una promesa es muy común, pues nos permite controlar todas sus etapas en distintas maneras. Sin embargo, esto nos puede llevar a lo que se conoce como callback hell. Para conocer más sobre este concepto, te invitamos a leer nuestros artículos sobre qué es callback hell en JavaScript y deshacer el callback hell en JavaScript.
¿Quieres seguir aprendiendo?
Ahora que sabes qué son y cómo funcionan las peticiones HTTP con Fetch, ¡es momento de utilizar este método en tus propios proyectos! Si quieres seguir aprendiendo sobre el desarrollo de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¿A qué esperas para inscribirte? ¡Hazlo ya y cambia tu vida!
