¿Cómo funciona el código asíncrono en JavaScript?

En este artículo, aprenderemos sobre el código asincrónico que funciona en JavaScript. Comprendamos los detalles básicos que están asociados con Synchronous JavaScript .

JavaScript síncrono:

• JavaScript sincrónico implica que el usuario tiene los datos a los que se accede sincrónicamente y que están disponibles en orden.
• En esto, el usuario intenta acceder a los datos que están disponibles en diferentes segmentos del código (como en diferentes funciones o métodos), que están interrelacionados entre sí o son interdependientes entre sí.
• El concepto de pila de llamadas entra en escena, que es una pila que sigue la estructura LIFO (último en entrar, primero en salir) en la que cada función de la tarea se ejecuta eliminando cualquier cosa que esté presente en la parte superior de la pila.

Ejemplo: con la ayuda del siguiente código, comprendamos el concepto de JavaScript síncrono.

<script>
    let secondFunction = () => {
        console.log("GeeksforGeeks....");
        console.log("Second Function execution is completed.....");
    }
 
    let firstFunction = () => {
        console.log("First function Execution Starts.....");
        secondFunction();
        console.log("First Function execution ends here.....");
    }
 
    firstFunction();
</script>

Producción:

First function Execution Starts.....
GeeksforGeeks....
Second Function execution is completed.....
First Function execution ends here.....

El funcionamiento del código síncrono anterior se explica con la ayuda de la siguiente representación pictórica de Call Stack.

• Cada elemento se elimina de la parte superior de la pila y, cuando se elimina, se imprime en la consola del navegador.
• Así es como funciona realmente el código síncrono cada vez que se llaman a diferentes funciones con su respectiva ejecución de datos también.

Ahora que hemos entendido los detalles asociados con JavaScript síncrono, comprendamos qué es JavaScript asíncrono y su funcionamiento en la ejecución.

JavaScript asíncrono:

• JavaScript asíncrono simplemente implica el hecho de que el usuario recibirá los datos de una manera más rápida.
• Esto generalmente ocurría cada vez que el usuario intenta obtener los datos del recurso API (interfaz de programación de aplicaciones) o intenta recopilar la respuesta de la propia API.
• Para manejar los datos asincrónicos, usamos promesas o devoluciones de llamadas que ayudan a los usuarios a obtener fácilmente respuestas o datos de la API con facilidad.
• Después de comprender los conceptos básicos de Call Stack, existen algunos conceptos más técnicos como Event Loop, Web API y Message Queue.
• Todos estos no están asociados con el motor de JavaScript, en realidad están relacionados con el entorno de tiempo de ejecución de JavaScript del navegador.
• Cada vez que aparece un método sincrónico o eventos DOM (como setTimeout o promesas o devoluciones de llamada), se ejecuta en la API web y, una vez que se completa su temporizador, se envía a la cola de mensajes desde donde el bucle de eventos empuja aún más ese mensaje a Call Stack para su ejecución.
• La tarea que ejecuta Event Loop es básicamente determinar si la pila está vacía o no. Si está vacío, ese bucle de eventos en particular toma datos de la cola de mensajes a la pila de llamadas para su ejecución.

Ejemplo 1: a continuación, se muestran algunos de los ejemplos en los que mostraremos la naturaleza asíncrona del código JavaScript mediante promesas, devoluciones de llamada o eventos DOM.

<script>
    console.log("Program Starts......");
 
    setTimeout(() => {
      console.log("setTimeout execution....");
    }, 0);
 
    new Promise((resolve, reject) => {
      resolve("Promise resolved.....");
    })
     .then((res) => console.log(res))
     .catch((error) => console.log(error));
 
    console.log("Program Ends.....");
</script>

Producción:

Program Starts......
Program Ends.....
Promise resolved.....
setTimeout execution....

Ejemplo 2:

<script>
    console.log("Program Starts......");
    setTimeout(() => {
        console.log("setTimeout 1 execution....");
    }, 0);
    setTimeout(() => {
        console.log("setTimeout 2 execution....");
    }, 0);
    new Promise((resolve, reject) => {
        resolve("Promise 1 resolved.....");
    }).then((res) => console.log(res))
      .catch((error) => console.log(error));
    new Promise((resolve, reject) => {
        resolve("Promise 2 resolved.....");
    }).then((res) => console.log(res))
      .catch((error) => console.log(error));
    console.log("Program Ends.....");
</script>

Producción:

Program Starts......
Program Ends.....
Promise 1 resolved.....
Promise 2 resolved.....
setTimeout 1 execution....
setTimeout 2 execution....