En esta serie de artículos aprenderemos todo sobre JavaScript asíncrono, recorriendo todos los conceptos principales que se han implementado en JavaScript a lo largo de los años. Además, crearemos juntos una aplicación que consumirá una API de juegos, donde podremos buscar nuestros juegos favoritos y, al hacer clic en un elemento, visualizar los juegos relacionados a él. Mira cómo quedará este proyecto al final:
¿Te gustó esta idea? Entonces, embárcate con nosotros en el viaje por JavaScript asíncrono.
En este primer artículo hablaremos sobre la diferencia entre una solicitud síncrona y asíncrona. Para entender esta diferencia, necesitaremos retroceder un poco en el tiempo.
Un poco de Historia
Durante muchos años en la Web, la única manera que teníamos para realizar solicitudes a un servidor o ejecutar funciones era mediante un código síncrono.
En un código síncrono, todas las funciones y solicitudes trabajan en sincronia, en un contacto directo, de principio a fin de la comunicación. De esta manera, este código solo permite una solicitud a la vez. Como mencionamos anteriormente, durante muchos años en la Web era de esta manera que los sistemas funcionaban. Sin embargo, con el tiempo se fueron percibiendo algunas cuestiones que podrían convertirse en un problema.
Por ejemplo: si hacemos una solicitud a una API, necesitamos esperar su respuesta. Hasta ahí todo bien. Pero, imagina que tenemos más de una solicitud que hacer. Con un código síncrono, cualquier otra solicitud aparte de la principal se bloquea hasta que termine la primera. En otras palabras, necesitamos esperar la respuesta de la primera solicitud para luego ir a la siguiente. Esto podría afectar la experiencia del usuario, dejando nuestro sitio un tanto monótono.
Una solicitud asíncrona es diferente. No trabaja en sincronia. De esta forma, podemos realizar varias solicitudes al mismo tiempo, y una solicitud no afectará a la otra. Esto es impresionante y ayuda mucho en el rendimiento y en la experiencia del usuario también. En pocas palabras, con un código asíncrono, nuestro sitio se vuelve más dinámico.
Para entender mejor esta diferencia, pensemos en la siguiente ilustración: en el pasado, en los años 90, los navegadores Web no contaban con la función de pestañas. Es decir, si queríamos acceder a un sitio, teníamos que hacerlo uno por uno. Imagina: quieres ir a Spotify. Accedes a este sitio, sin problemas. Pero al mismo tiempo, quieres acceder al sitio de Hcode para leer artículos sobre programación mientras escuchas música. Si el navegador tiene solo una pestaña, eso no es posible. Necesitas salir de un sitio para luego ir a otro. Este es el concepto de una solicitud síncrona.
Sin embargo, todavía hablando sobre navegadores, el navegador Opera fue creado en 2000, trayendo como principal novedad la función de pestañas, disponible en prácticamente todos los navegadores actuales. Con las pestañas, podemos acceder a varios sitios al mismo tiempo. Podemos entrar a Spotify, a YouTube y al sitio de Hcode al mismo tiempo, y una pestaña no interfiere con la otra. Este es el concepto de una solicitud asíncrona.
Ahora, una duda: ¿prefieres acceder a varias pestañas al mismo tiempo o solo a una a la vez? Imagino que tu elección sea la primera. De la misma manera, las solicitudes asíncronas son más utilizadas en la Web hoy en día, y entender cómo JavaScript las manipula puede ser un diferencial en nuestro código. Las solicitudes asíncronas fueron una verdadera revolución en la Web. Este concepto inspiró la creación de herramientas utilizadas hasta hoy, como AJAX, que se basa en parte en JavaScript. Esperamos que hayan disfrutado de este primer artículo.
Con esta información en mente, podemos avanzar un poco más en el tiempo, ya que JavaScript se ha ido especializando cada vez más para ofrecernos más facilidad con solicitudes asíncronas.
Una primera ayuda fue el uso de callbacks. Hablaremos sobre este concepto en el próximo artículo: JavaScript Asíncrono: La Guía Completa - Parte 2 - Callbacks, ¡hasta entonces!