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ónslowTask toma una devolución de llamada como argumento. La funciónslowTask utilizasetTimeout para retrasar la ejecución de una tarea durante un segundo. La funciónrunProgram llama aslowTask y pasa una función de devolución de llamada como argumento. Además, la funciónrunProgram registra "Programa iniciado" y "Programa finalizado". Cuando la funciónslowTask 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ónasincrónica y puede estar en uno de tres estados: pendiente, cumplida o rechazada. Se puede crear una promesa usando elPromise constructor y su estado se puede determinar usando los métodosthen ycatch.

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ónslowTask retorna una promesa que se resuelve después de un segundo con el mensaje "Tarea lenta completada". La funciónrunProgram llama aslowTask y utiliza el métodothen 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 operacionesasincró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 claveasync se usa para declarar una función asincrónica, y la palabra claveawait se usa para esperar a que se resuelva una promesa.

A continuación, se muestra unejemplo para demostrar el uso de async/await en #"https://api.example.com/data"); const data = await response.json(); console.log(data);}fetchData();