Programación asincrónica en Javascript

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.