JavaScript Básico

Inicio / Tema / JavaScript Básico / Asincronía en JavaScript

Asincronía en JavaScript

La asincronía es uno de los conceptos más importantes en JavaScript, ya que permite que el lenguaje maneje operaciones que tardan tiempo en completarse, como solicitudes a servidores, manejo de archivos, o temporizadores. En este capítulo, exploraremos cómo JavaScript maneja la asincronía y cómo puedes escribir código asíncrono utilizando callbacks, promesas y la sintaxis async/await.

El modelo de ejecución de JavaScript

JavaScript utiliza un modelo de ejecución basado en un solo hilo, lo que significa que solo puede ejecutar una cosa a la vez. Sin embargo, para manejar múltiples tareas que no se pueden completar inmediatamente, como una petición de red, JavaScript utiliza un mecanismo conocido como event loop. Esto permite que el código siga ejecutándose mientras espera la respuesta de una operación asíncrona.

Callbacks

Un callback es una función que se pasa como argumento a otra función y se ejecuta después de que se complete una tarea. Es una de las formas más antiguas y básicas de manejar asincronía en JavaScript.

Ejemplo de Callback

javascript

"En este ejemplo, la función fetchData simula la obtención de datos utilizando setTimeout, que espera dos segundos antes de ejecutar la función callback. Cuando se llama a fetchData, pasamos una función anónima como callback que imprime Data received en la consola después de dos segundos."

Los callbacks son útiles, pero cuando tienes múltiples operaciones asíncronas encadenadas, pueden llevar a lo que se conoce como el callback hell, donde el código se vuelve difícil de leer y mantener.

Promesas

Para evitar el callback hell, JavaScript introdujo las promesas. Una promesa es un objeto que representa la eventual finalización o falla de una operación asíncrona. Las promesas pueden estar en uno de tres estados:

Pendiente: La promesa aún no se ha resuelto ni rechazado.
Resuelta: La operación se completó con éxito.
Rechazada: La operación falló.

Ejemplo de Promesa

javascript

"Aquí usamos una promesa en la función fetchData. La promesa se resuelve después de dos segundos con el mensaje Data received. Usamos then para manejar el resultado exitoso y catch para manejar cualquier error que pueda ocurrir."

Las promesas son una mejora significativa sobre los callbacks, ya que proporcionan una forma más clara de manejar operaciones asíncronas, especialmente cuando se combinan múltiples promesas.

Encadenamiento de Promesas

Una de las grandes ventajas de las promesas es que puedes encadenarlas para manejar múltiples operaciones asíncronas de manera secuencial.

javascript

"En este ejemplo, encadenamos dos promesas usando then. Primero imprimimos Data received, luego llamamos nuevamente a fetchData y manejamos el resultado con un segundo then. Si ocurre algún error, catch lo captura y lo maneja."

Async y Await

Aunque las promesas mejoran la legibilidad del código asíncrono, la introducción de async y await en ES2017 las simplificó aún más. async/await te permite escribir código asíncrono que se parece mucho al código síncrono, lo que hace que sea más fácil de leer y entender.

Funciones `async` y `await`

Una función marcada con async siempre devuelve una promesa. Dentro de una función async, puedes usar la palabra clave await para esperar la resolución de una promesa antes de continuar con el siguiente paso.

javascript

"Aquí usamos la sintaxis async y await para manejar la promesa devuelta por fetchData. Esperamos la resolución de la promesa utilizando await, lo que permite que el código se vea más limpio y parecido al código síncrono. Si ocurre un error, lo manejamos con try y catch."

El uso de async/await es generalmente preferido por su simplicidad y legibilidad, especialmente cuando tienes múltiples operaciones asíncronas que deben ejecutarse en secuencia o en paralelo.

Ejecución en Paralelo con `Promise.all`

Si tienes varias promesas que pueden ejecutarse en paralelo, puedes usar Promise.all para esperar a que todas se resuelvan antes de continuar.

javascript

"En este ejemplo, usamos Promise.all para ejecutar dos promesas en paralelo. Ambas promesas son manejadas en el bloque try y cuando ambas se resuelven, imprimimos sus resultados. Si ocurre un error en cualquiera de las promesas, el bloque catch lo manejará."

Conclusión

La asincronía es un aspecto clave de JavaScript y es fundamental para crear aplicaciones web eficientes y responsivas. En este capítulo, hemos explorado cómo manejar la asincronía utilizando callbacks, promesas y la sintaxis async/await.

Volver al capítulo anterior

Marcar como leìdo y continuar