A la hora de escribir código con procesos asíncronos, el orden en que se ejecutarán nuestras líneas de código cambiará. En este post, te enseñaremos en qué orden se ejecuta una petición Fetch cuando llamamos a datos de una API.
Ejemplo de en qué orden se ejecuta una petición Fetch
Con el fin de explicarte en qué orden se ejecuta una petición Fetch, tomaremos de ejemplo un código similar al que hemos escrito en nuestro post sobre traer datos de una API con Fetch:
getData ( ) {
const url = «https://urldeunAPIinvestado.com»
fetch (url)
.then (responseHttp) => {…
})
.catch (error) => {…
})
.then (tweets) => {…
});
console.log (‘hola’);
},
};
Como puedes ver en las líneas de código anteriores, hemos definido una función getData con una constante url en la que se guarda el enlace de una API inventada. Luego, siguiendo la estructura de peticiones HTTP con Fetch, hemos insertado esta constante como parámetro del método fetch para hacer una petición a esta URL. Ya que las peticiones de esta clase son procesos que pueden tomar un tiempo indeterminado, las peticiones con Fetch devuelven una promesa, que podemos controlar con métodos como then y catch.
Para este contexto, no es relevante qué se ha hecho en cada método de control de promesas, pues finalmente nos importa más el orden en el que se ejecuta que el código que lo ejecuta. Sin embargo, en términos generales, el código anterior transforma la respuesta HTTP a un json en el primer then, luego captura el error en el catch y pinta los tweets en pantalla (la base de datos de nuestro proyecto de ejemplo).
Al final del control de esta promesa, hemos agregado un console.log de un simple «hola» dentro de la función getData. ¿Por qué? Pues para poder revisar exactamente en qué orden se ejecuta una petición fetch.
¿En qué orden se ejecuta una petición Fetch?
Ahora que tenemos nuestro ejemplo y la línea de código que comprobará en qué orden se ejecuta una petición HTTP, podemos revisar lo que sucede. Para ello, te recomendamos tener abierto el inspector de tu navegador para ver el orden de ejecución e la consola. Si tienes dudas sobre cómo funciona esta herramienta, te invitamos a leer nuestro post sobre cómo funciona el inspector web.
Entonces, ¿qué saldrá primero por consola? ¿El hola o los tweets? La respuesta correcta es el hola. Esto sucede porque, como te mencionamos antes, Fetch es un método asíncrono. Por ello, su ejecución depende de que la llamada HTTP se resuelva. En este sentido, el intérprete de JavaScript leerá la constante URL y continuará. Luego, leerá el método fetch y sabrá que tiene que ejecutar la petición HTTP. Entonces, por el momento hará la petición y esperará a que se resuelva para ver qué hace con ella.
Mientras la petición HTTP se ejecuta, el intérprete JavaScript sigue leyendo nuestro código. ¿Y qué sigue? Pues el console.log de «hola». Entonces, el intérprete lo pintará. Luego, cuando la petición se resuelva, volverá a revisar los métodos then y catch y los ejecutará en función del resultado.
¿Qué sigue?
Ahora que sabes en qué orden se ejecuta una petición Fetch, te invitamos a utilizar este método para hacer peticiones HTTP en tus propios proyectos. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás la teoría y la práctica para desarrollar todo tipo de proyectos web. ¡No te lo pierdas y solicita información!
