JavaScript es un lenguaje de subproceso único, lo que significa que solo puede hacer una cosa a la vez. Sin embargo, las aplicaciones web a menudo necesitan realizar tareas como recuperar datos de un servidor, lo que puede llevar algún tiempo. Si JavaScript tuviera que esperar a que finalice cada tarea antes de continuar, su aplicación web sería lenta y no respondería. Aquí es donde entra JavaScript asíncrono (asíncrono).

¿Qué es JavaScript asíncrono?

JavaScript asincrónico permite que su código inicie una tarea y luego pase a otras tareas mientras espera que se complete. Una vez finalizada la tarea, su código puede regresar y manejar el resultado. Esto ayuda a que tu aplicación sea rápida y receptiva.

Conceptos clave en JavaScript asíncrono

1. Síncrono versus asíncrono:

   • Sincrónico: Cada tarea espera a que finalice la anterior antes de comenzar. Por ejemplo:

    console.log("Start");
    let result = someFunction(); // This might take a while
    console.log("End");
   

   En código síncrono, el mensaje "Fin" solo se registrará después de que se haya completado alguna Función(), lo que puede ralentizar las cosas.

• Asincrónico: las tareas pueden comenzar y finalizar de forma independiente, para que su código no se quede atascado esperando. Por ejemplo:
  

   console.log("Start");
   setTimeout(() => {
       console.log("End");
   }, 2000);
  

  Aquí, el mensaje "Fin" se registrará después de 2 segundos, pero mientras tanto, tu código puede seguir haciendo otras cosas.

1. Devoluciones de llamada:

   • Una devolución de llamada es una función que se pasa como argumento a otra función, que se ejecutará después de que se complete una tarea.
   • Ejemplo:

    function fetchData(callback) {
        setTimeout(() => {
            let data = "Some data";
            callback(data);
        }, 2000);
    }
   
    fetchData((data) => {
        console.log(data); // This will log "Some data" after 2 seconds
    });
   

• Las devoluciones de llamada eran la forma original de manejar tareas asíncronas, pero pueden volverse complicadas, especialmente si tienes muchas tareas que administrar (esto se conoce como "infierno de devolución de llamada").

1. Promesas:

   • Una promesa es un objeto que representa la eventual finalización (o falla) de una tarea asincrónica y su valor resultante.
   • Ejemplo:

    let promise = new Promise((resolve, reject) => {
        let success = true;
        if (success) {
            resolve("Task completed successfully!");
        } else {
            reject("Task failed!");
        }
    });
   
    promise.then((message) => {
        console.log(message);
    }).catch((error) => {
        console.log(error);
    });
   

• resolve: Si la tarea se completa exitosamente, la promesa se "resuelve" con un valor.
• rechazar: Si la tarea falla, la promesa se "rechaza" con un mensaje de error.
• .then(): Maneja el valor devuelto si se resuelve la promesa.
• .catch(): Maneja el error si se rechaza la promesa.

1. Asíncrono/Espera:

   • async y await son ​​funciones modernas de JavaScript que hacen que trabajar con promesas sea más fácil y legible.
   • async: Una función declarada con async siempre devolverá una promesa.
   • await: pausa la ejecución de una función asíncrona hasta que se resuelva la promesa.
   • Ejemplo:

    async function fetchData() {
        try {
            let data = await someAsyncTask();
            console.log(data);
        } catch (error) {
            console.error("Error:", error);
        }
    }
   

• En este ejemplo, la palabra clave await se utiliza para esperar a que se complete algunaAsyncTask antes de pasar a la siguiente línea de código. Si la tarea falla, el error se detecta y se maneja en el bloque catch.

Resumen

• JavaScript asíncrono ayuda a evitar que tu aplicación se vuelva lenta y deje de responder al permitir que tu código maneje múltiples tareas al mismo tiempo.
• Las devoluciones de llamada son ​​funciones que se ejecutan después de que se completa una tarea asíncrona, pero pueden resultar complicadas con tareas complejas.
• Las promesas proporcionan una forma más limpia de manejar operaciones asíncronas, que representan tareas que se completarán en el futuro.
• Async/Await es una sintaxis moderna que hace que trabajar con promesas sea más simple y legible.

Comprender JavaScript asíncrono es esencial para crear aplicaciones web eficientes y con capacidad de respuesta, ya que permite que su código realice tareas sin quedarse atascado esperando a que se completen operaciones lentas.