Hola bienvenidos al blog 😀 en este post vamos a ver que es la Asíncronia en JavaScript con ejemplos gráficos y prácticos.

Asincronía

La asincronía es uno de los pilares fundamentales de Javascript, ya que es un lenguaje de programación de un sólo subproceso o hilo (single thread), lo que significa que sólo puede ejecutar una cosa a la vez.

single thread un solo hilo de ejecución

Si bien los idiomas de un sólo hilo simplifican la escritura de código, porque no tiene que preocuparse por los problemas de concurrencia, esto también significa que no puede realizar operaciones largas como el acceso a la red, sin bloquear el hilo principal.

Imagina que solicitas datos de una API. Dependiendo de la situación, el servidor puede tardar un tiempo en procesar la solicitud mientras bloquea el hilo principal y hace que la página web no responda.

Ahí es donde entra en juego la 📲🤙 Asincronía que permite realizar largas solicitudes de red sin bloquear el hilo principal.

• ✅ JavaScript fue diseñado para ser ejecutado en navegadores, trabajar con peticiones sobre la red y procesar las interacciones de usuario, al tiempo que mantiene una interfaz fluida.

• ✅ Javascript usa un modelo asíncrono y no bloqueante, con un loop de eventos implementado en un sólo hilo, (single thread) para operaciones de entrada y salida (input/output).

Modelo asíncrono y no bloqueante: Gracias a esta solución, Javascript es áltamente concurrente a pesar de emplear un sólo hilo.

Antes de explicar como funciona el modelo de JavaScript es importante entender algunos conceptos:

Síncrono y Asíncrono

Se refiere a ¿ cuándo tendrá lugar la respuesta ?

Síncrono: La respuesta sucede en el presente, una operación síncrona esperará el resultado.

Asíncrono: La respuesta sucede a futuro, una operación asíncrona no esperará el resultado. Con lo anterior en JavaScript podemos tener:

Código síncrono y bloqueante o Código asíncrono y no bloquenate

Operaciones de CPU y de Entrada y Salida

• ✅ Operaciones CPU: Aquellas que pasan el mayor tiempo consumiendo Procesos del CPU, por ejemplo, la escritura de ficheros.

• ✅ Operaciones de Entrada y Salida: Aquellas que pasan la mayor parte del tiempo esperando la respuesta de una petición o recurso, como la solicitud a una API o BD.

• ✅ Concurrencia y Paralelismo.

Concurrencia: cuando dos o más tareas progresan simultáneamente.

Paralelismo: cuando dos o más tareas se ejecutan, al mismo tiempo. Bloqueante y No Bloqueante Se refiere a como la fase de espera de las operaciones afectan a nuestra aplicación:

Bloqueante y No Bloqueante

Se refiere a como la fase de espera de las operaciones afectan a nuestra aplicación:

Bloqueante: Son operaciones que no devuelven el control a nuestra aplicación hasta que se ha completado. Por tanto el thread queda bloqueado en estado de espera.

No Bloqueante: Son operaciones que devuelven inmediatamente el control a nuestra aplicación, independientemente del resultado de esta. En caso de que se haya completado, devolverá los datos solicitados. En caso contrario si la operación no ha podido ser satisfecha podría devolver un código de error.

Single thread y Multi thread

Un hilo la unidad básica de ejecución de un proceso, cada que abres un programa, como el navegador o tu editor de código, se levanta un proceso en tu computadora e internamente este puede tener uno o varios hilos (threads) ejecutándose para que el proceso funcione.

👀 Ojo, que no es Multi-Threading. En JavaScript, existe un solo Thread, y el asincronismo no crea otro thread. Los "procesos" no necesariamente se ejecutan de forma simultanea, sino que se delegan y se ejecutan en ordenes diferentes, ya no secuenciales a como fueron escritos en el codigo originalmente. Algunas cosas pasan a "segundo plano" y van a ser procesadas solo cuando el thread este desocupado. Entonces en realidad todo se ejecuta secuencialmente pero lo que está en una promesa o en un await se ejecuta en un tiempo X, cuando el thread este desocupado, y no lo bloquea, entonces si tiene que renderizar algo, lo puede hacer.

💻 Programa función asíncrona

Vamos a analisar el siguiente código y ver el comportamiento del código asíncrono. Gracias a la API del navegador nos brinda setTimeout.

function resolAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("resolved");
    }, 2000);
  });
}

async function asyncCall() {
  console.log("calling");
  const result = await resolAfter2Seconds(); //esto sería una promesa? Si es la solución a la promesa
  console.log(result);
}

asyncCall();

vamos a ver cómo se ejecuta el anterior programa paso a paso:

Como podemos ver en el gráfico el event loop o bucle de eventos es un proceso que espera a que la pila de llamadas se elimine antes de enviar devolucionesde llamada de la cola de tareas a la pila de llamadas. Una vez que la pila está limpia, el ciclo de eventos se activa y verifica la cola de tareas para ver si hay devoluciones de llamada disponibles.

• ✅ Las funciones son empujadas al call stack cuando son invocadas y se sacan cuando devuelven un valor.

• ✅ El callback es añadido al call stack para luego ser ejecutado. Una vez retorna un valor, este es sacado de call stack.

• ✅ El Event Loop mira hacia el callback queue y al call stack. Si el call stack está vacío, este empuja el primer elemento de la cola en el stack.

👁️ Analizaremos la ejecución del código en memoria

🤓 Conclusiones

Bueno para finalizar les dejo un resumen de los conceptos que hemos aplicado en programa pero en simples palabras, espero que te sirva este post, estuve pensando mucho como mostrar este mapa gráfico, junto con el programa (código). Espero que haya ayudado. Para profundizar en el event loop les dejo la siguiente charla.

📹 Event loop

La programación asíncrona se refiere a la ejecución de procesos ejecutándose de manera simultánea (Multi thread).

Proceso Asíncrono La respuesta sucede a futuro, una operación asíncrona no esperará el resultado continua con el resto de tareas.

Asíncrono: cuando algo no depende de otra cosa para continuar eso es asíncrono (cuando ejecuta 2 o más cosas en paralelo)

Síncrono: la línea de abajo depende de línea de arriba en la ejecución del programa.

¡Muchas gracias por tu lectura dejo el link de cafecito apoyo voluntario, tu contribución me motiva a seguir creando contenido de alta calidad. ¡Muchas gracias por tu apoyo!