Si estas empezando en el desarrollo de aplicaciones web en Javascript, quizas ya te has encontrado con palabras como then, async, await, o estas funciones que estan dentro de otras funciones:

myFunction(myFunction() {

})

Buento todas estas palabras estan relacionadas gracias a un concepto muy usado en Javascript llamado Asíncronia, esta se utiliza tipicamente en JavaScript para manejar:

• operaciones como solicitudes HTTP
• accesos a bases de datos
• animaciones
• manejar eventos del usuario que pueden tardar un tiempo en completarse.

entre muchas otras tareas. Esto debido a que la asincronía es una técnica importante en la programación JavaScript para manejar operaciones costosas en términos de tiempo, permitiendo que el código siga ejecutándose mientras se realizan tareas en segundo plano. Es decir La asincronía permite mejorar el rendimiento de las aplicaciones y evitar que la interfaz de usuario se bloquee.

Para trabajar con asincronía en JavaScript, se utilizan diferentes técnicas, incluyendo setTimeout, setInterval, promesas y async/await.

En general, se recomienda utilizar la asincronía en JavaScript siempre que sea posible para evitar bloqueos en la interfaz de usuario y mejorar la eficiencia de las aplicaciones. Al comprender cómo funcionan las diferentes técnicas de asincronía, los programadores pueden escribir código más legible y eficiente que mejora la experiencia del usuario.

¿Qué es la asincronía en JavaScript? JavaScript es un lenguaje de programación que se ejecuta en un solo hilo (thread) y, por lo tanto, es importante ser consciente de las operaciones que pueden bloquear la ejecución. Cuando se realiza una operación costosa en términos de tiempo (por ejemplo, una petición HTTP), el hilo se bloquea hasta que se completa la operación, lo que puede hacer que la interfaz de usuario no responda a las interacciones del usuario o que otras operaciones no puedan ejecutarse.

La asincronía en JavaScript es una técnica que se utiliza para evitar estos bloqueos y permitir que el código continúe ejecutándose mientras se realizan operaciones costosas en segundo plano. En lugar de bloquear el hilo principal, JavaScript delega estas operaciones a un "thread" secundario o al "event loop" que se encarga de gestionar las tareas asíncronas.

¿Qué es la Asíncronia en Javascript?

Timers en Javascript

En JavaScript, los "timers" son funciones que permiten programar la ejecución de un código después de un cierto período de tiempo o de manera repetida en intervalos de tiempo definidos. Los timers son útiles para programar tareas asíncronas y pueden ser utilizados en diferentes contextos, como en el desarrollo de aplicaciones web, en animaciones y en juegos.

Los timers en JavaScript se pueden crear utilizando las siguientes funciones:

• setTimeout
• setInterval
• clearTimeout

veamos de que se trata

Los timers son útiles para programar tareas asíncronas y pueden ser utilizados en diferentes contextos, como en el desarrollo de aplicaciones web, en animaciones y en juegos.

En JavaScript, hay varios métodos para trabajar con asincronía, entre los cuales los más comunes son:

setTimeout

timers/setTimeout.js

Este método permite programar una tarea para que se ejecute después de un cierto tiempo en milisegundos. Por ejemplo:

setTimeout(function () {
  console.log("Completed Task");
}, 3000);

En este caso, la tarea se ejecutará después de 3 segundos.

setInterval

Este método permite programar una tarea para que se ejecute repetidamente cada cierto tiempo en milisegundos. Por ejemplo:

timers/setTimeout.js

setInterval(function() { console.log('Tarea realizada'); }, 5000);

En este caso, la tarea se ejecutará cada 5 segundos.

Javacript

JavaScript utiliza varias sintaxis para manejar la asincronía, incluyendo:

• callbacks
• promesas
• async/await

Promesas

Las promesas son una forma de manejar operaciones asíncronas y su resultado. Una promesa representa un valor que puede estar disponible ahora, en el futuro o nunca. Una promesa puede estar en uno de los siguientes estados:

Pending: La promesa aún no ha sido resuelta ni rechazada. Fulfilled: La promesa ha sido resuelta satisfactoriamente. Rejected: La promesa ha sido rechazada debido a un error.

Para crear una promesa, se utiliza la sintaxis:

const miPromesa = new Promise(function(resolve, reject) { // Aquí se realiza la operación asíncrona // Si la operación se completa satisfactoriamente: resolve('Operación completada'); // Si la operación falla: reject('Error en la operación'); });

La función que se pasa a la promesa tiene dos parámetros: resolve y reject. El primero se utiliza para resolver la promesa satisfactoriamente, mientras que el segundo se utiliza para rechazarla en caso de que ocurra algún error.

Para utilizar el resultado de la promesa, se utilizan los métodos then y catch:

miPromesa.then(function(resultado) { console.log(resultado); }).catch(function(error) { console.log(error); });

El método then se ejecuta cuando la promesa se resuelve satisfactoriamente, mientras que el método catch se ejecuta cuando la promesa es rechazada.

Async/await (continuación) La sintaxis async/await es una forma de trabajar con promesas de manera más simple y legible. Async/await permite escribir código asíncrono como si fuera sincrónico, lo que facilita la lectura y el mantenimiento del código.

La palabra clave async se utiliza para definir una función asincrónica, mientras que la palabra clave await se utiliza para indicar que una operación asíncrona debe esperarse a que se complete antes de continuar con la ejecución del código. Por ejemplo:

async function miFuncion() { try { const resultado = await miPromesa; console.log(resultado); } catch (error) { console.log(error); } }

En este caso, la función miFuncion se define como asincrónica con la palabra clave async. La función utiliza await para esperar a que se complete la promesa miPromesa antes de continuar con la ejecución. El resultado de la promesa se almacena en la variable resultado y se muestra por consola.

La sintaxis try/catch se utiliza para manejar los errores que puedan ocurrir en la operación asíncrona.

Nodejs

Ahora vamos a hacer un ejemplo tambien con Nodejs.

Conclusión

La asincronía en JavaScript es una técnica importante para evitar que la interfaz de usuario se bloquee y para mejorar el rendimiento de las aplicaciones. En este tutorial, hemos visto algunos de los métodos más comunes para trabajar con asincronía en JavaScript, incluyendo setTimeout, setInterval, promesas y async/await. Es importante entender cómo funcionan estos métodos y cuándo utilizarlos para escribir código más eficiente y legible.

Versiones anteriores de Este video

• https://youtu.be/Q3HtXuDEy5s, en esta primera version se explica callbacks, promesas y async/await pero usando Nodejs. a diferencia de esta version que usamos en el navegador primero y luego probamos con Nodejs como seria.