Programación asincrónica en Javascript
Tags: javascript, node, react, asynchronous
Published: 2024-05-23 18:55:31

JavaScript, al ser un lenguaje de un solo subproceso, solo puede procesar una tarea a la vez. Esto puede provocar largos tiempos de espera para tareas complejas, ya que el script no podrá ejecutar ninguna otra tarea hasta que termine la actual. Para abordar este problema, JavaScript ofrece programación asincrónica, permitiendo que el script continúe ejecutando otras tareas mientras espera que se complete una tarea asincrónica. En este blog, exploraremos los conceptos básicos de la programación asincrónica en JavaScript y cómo se puede implementar utilizando funciones de devolución de llamada, promesas y async/await.

## Funciones de devolución de llamada
Una función de devolución de llamada es una función que se pasa como argumento a otra función y se ejecuta después de que la función principal haya terminado. Las devoluciones de llamada se utilizan en programación asincrónica para realizar una acción una vez que se ha completado una tarea.

**Por ejemplo, considere el siguiente código:**

```
function slowTask(callback) {
  setTimeout(() => {
    console.log("Slow task completed.");
    callback();
  }, 1000);
}

function runProgram() {
  console.log("Program started.");
  slowTask(() => {
    console.log("Callback function executed.");
  });
  console.log("Program ended.");
}

runProgram();
```
En este ejemplo, la función **slowTask** toma una devolución de llamada como argumento. La función **slowTask** utiliza **setTimeout** para retrasar la ejecución de una tarea durante un segundo. La función **runProgram** llama a **slowTask** y pasa una función de devolución de llamada como argumento. Además, la función **runProgram** registra "Programa iniciado" y "Programa finalizado". Cuando la función **slowTask** se completa, registra "Tarea lenta completada" y ejecuta la función de devolución de llamada, que registra "Función de devolución de llamada ejecutada"

```
Program started.
Program ended.
Slow task completed.
Callback function executed.
```

## Promesas
Las promesas son un enfoque más moderno para la programación asincrónica en JavaScript. Una promesa representa el resultado de una operación **asincrónica** y puede estar en uno de tres estados: pendiente, cumplida o rechazada. Se puede crear una promesa usando el **Promise** constructor y su estado se puede determinar usando los métodos **then** y **catch**.

**Por ejemplo:**

```
const slowTask = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Slow task completed.");
  }, 1000);
});

function runProgram() {
  console.log("Program started.");
  slowTask
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.error(error);
    });
  console.log("Program ended.");
}

runProgram();
```
En este ejemplo, la función **slowTask** retorna una promesa que se resuelve después de un segundo con el mensaje "Tarea lenta completada". La función **runProgram** llama a **slowTask** y utiliza el método **then** para registrar el resultado cuando se cumple la promesa.

**La salida será:**

```
Program started.
Program ended.
Slow task completed.
```

## Asíncrono/Espera
**Async/await** es la forma más reciente y legible de manejar operaciones **asincrónicas** en JavaScript. Permite a los desarrolladores escribir código asincrónico que se asemeja al código síncrono, lo que facilita su comprensión y mantenimiento. La palabra clave **async** se usa para declarar una función asincrónica, y la palabra clave **await** se usa para esperar a que se resuelva una promesa.

A continuación, se muestra un **ejemplo para demostrar el uso de async/await en JavaScript:**

```
async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

fetchData();
```
En este ejemplo, la función **fetchData** se declara como asincrónica mediante la palabra clave **async**. La función utiliza **fetch** para recuperar datos de una **API** y **await** para esperar a que se complete la operación de recuperación. Luego, la respuesta obtenida se transforma en un objeto JSON usando **response.json().** La palabra clave **await** se utiliza para esperar a que se complete la transformación a JSON y el resultado final se registra en la consola.

Es importante tener en cuenta que el código dentro de una función asincrónica se ejecutará de forma asincrónica, pero el código fuera de la función se seguirá ejecutando de forma sincrónica. Además, la palabra clave **await** solo se puede utilizar dentro de una función asincrónica.

En conclusión, la programación asincrónica en JavaScript permite que el script continúe ejecutando otras tareas mientras espera que se complete una tarea asincrónica. Las funciones de devolución de llamada, las promesas y **async/await** son tres formas de lograr la programación asincrónica en JavaScript.

Las funciones de devolución de llamada son la forma más sencilla y básica de manejar operaciones asincrónicas. Las promesas ofrecen un enfoque más moderno y flexible.

Async/await proporciona la forma más legible de manejar operaciones asincrónicas y es el método recomendado para la programación en JavaScript moderna.
Comprender la programación asincrónica en JavaScript es crucial para crear aplicaciones eficientes y responsivas. Es una habilidad imprescindible para cualquier desarrollador de JavaScript.