Definición: Async es una forma abreviada de «asincrónico». Síncrono significa ejecutar declaraciones una tras otra, lo que implica que la siguiente declaración se ejecutará solo después de que la declaración anterior se ejecute por completo. Mientras que en las llamadas asincrónicas, la siguiente declaración se ejecuta sin siquiera esperar la ejecución de la anterior.
JavaScript es un lenguaje síncrono. Significa que la línea 10 en un archivo se ejecutará después de la línea 9, de forma predeterminada. Si declara una variable en la línea 9 y la usa en la línea 10, es posible que se esté golpeando la cabeza si ejecutó la línea 10 antes de la línea 9.
Sin embargo, hay algo de mérito en romper este flujo, especialmente cuando hay algún tipo de transferencia de datos a través de la red porque lleva tiempo. Y ahí es donde necesitamos incorporar la asincronía: la capacidad de anular el flujo normal de ejecución, para ahorrar tiempo.
Acabamos de escuchar que JavaScript se ha creado sincrónicamente, y es mejor que no hagamos ningún cambio importante en el lenguaje. Además, la asincronía significa que tenemos que introducir subprocesos y manejar interbloqueos. Java lo hace, y créanme, estamos realmente mejor si no complicamos JavaScript de la misma manera.
¿Cómo lo hacemos?
La respuesta está en cómo funciona JavaScript, o mejor dicho, dónde funciona: en el navegador. Utiliza estas funciones integradas, comúnmente llamadas API de navegador web para cosas como controlar el flujo de comandos, usar la pila de llamadas, obtener datos de red y otros. Estas API del navegador web se han confundido comúnmente como parte de JavaScript, pero en realidad, son parte del navegador y JavaScript solo las usa.
Ahora piénselo de esta manera, realmente no queremos que JavaScript perturbe el flujo de ejecución, pero aún queremos que algunas líneas de código se ejecuten antes de lo esperado. ¿Cómo lo hacemos? Simple, pídale a otra persona, que tenga algo que decir en el control del flujo, que detenga algún código, mientras que, al mismo tiempo, el JavaScript puede continuar con el código, esencialmente creando código síncrono, Async.
Tan ridículo como suena, eso es esencialmente lo que JavaScript ha estado haciendo.
La mayoría de nosotros hemos oído hablar de una función llamada método. Hemos asumido incorrectamente que es una función de JavaScript, pero desafortunadamente no lo es. Es una fachada, un frente de algo extraño que sucede detrás de escena. Y ‘algo extraño que sucede detrás de escena’ es la API del navegador web llamada Timer. Y aquí es donde nuestro código JavaScript síncrono comienza a ser asíncrono.
Tomemos un código de muestra para ver esto.
Javascript
function whoSaysGfg(){
console.log('g');
}
setTimeout(whoSaysGfg, 1000);
console.log('f');
Podríamos inclinarnos a creer que lo que hace setTimeout() es esperar 1000 milisegundos, luego ejecutar la función whoSaysGfg() y luego continuar.
¿Qué sucede en los 1000ms? ¿JavaScript simplemente se sienta y aplasta moscas? Serían pésimos desarrolladores si hicieran eso. Y créeme, son cualquier cosa menos pésimos. Lo que realmente sucede es que setTimeout() es una llamada a la API del temporizador, el límite del temporizador se pasa como un argumento, 1000 ms en este caso, y el otro argumento es una función de devolución de llamada que se ejecutará cuando el temporizador termine de contar hasta 1000 ms.
Nota: lo que JavaScript ha hecho esencialmente es ceder el control de la ejecución de whoSaysGfg al navegador web. Esa línea setTimeout ha terminado para JavaScript. Bien puede continuar con la siguiente línea de código, sin importar si whoSaysGfg se ha ejecutado o no. Entonces, JavaScript acaba de convertirse en Async.
Intenta adivinar cuál podría ser el resultado de esto.
Javascript
function whoSaysGfg(){
console.log('g');
}
setTimeout(whoSaysGfg, 0);
console.log('fg');
Si estás pensando en ‘gfg’, eso es incorrecto. Si pensaste ‘fgg’, tienes razón. Podríamos tender a pensar que un tiempo de espera de 0 esencialmente no significaría nada y que la función whoSaysGfg() sería llamada inmediatamente.
Esto tiene que ver con cómo se llaman y ejecutan las funciones en el navegador. Las funciones se agregan a la pila de llamadas cuando se ejecuta un script y se llama desde allí. Ahora, cuando la ejecución de una función se aplaza al navegador, como es el caso de setTimeout , la función se encuentra en una cola conocida como cola de tareas, cola de devolución de llamada o cola de tareas macro. Se queda allí hasta que toda la pila de llamadas esté vacía.
El ‘bucle de eventos’ es un servicio que sigue comprobando la pila de llamadas y la cola de tareas, y programa las funciones en la cola de tareas para acceder a la pila de llamadas tan pronto como esté vacía.
De esta forma, JavaScript, un lenguaje síncrono, se vuelve asíncrono.
Tenga en cuenta que esta no es la solución más óptima. Han surgido soluciones como promesas y async-await, pero este fue el comienzo de la comprensión de los conceptos de Async.