phreniac/m4-ae4-asincronia

Sincronía

La sincronía en JavaScript se refiere a la ejecución secuencial y bloqueante de código, donde cada instrucción se ejecuta en orden y el programa espera a que una operación se complete antes de continuar con la siguiente. En la sincronía, el flujo de ejecución sigue un orden predecible y lineal.

Cuando se ejecuta código de forma síncrona, cada instrucción se completa antes de pasar a la siguiente. Por ejemplo:

    console.log('Instrucción 1');
    console.log('Instrucción 2');
    console.log('Instrucción 3');

En este caso, las instrucciones se ejecutan secuencialmente y se mostrarán en la consola en el mismo orden en el que están escritas.

La sincronía es la forma de ejecución predeterminada en JavaScript. Cada línea de código se procesa de manera secuencial y se bloquea hasta que se completa la instrucción actual. Esto puede ser adecuado para ciertas tareas simples y rápidas donde no se requiere realizar operaciones asíncronas o que consuman mucho tiempo.

Sin embargo, en situaciones donde se requiere trabajar con operaciones que pueden llevar tiempo, como solicitudes de red, lectura/escritura de archivos o llamadas a bases de datos, la sincronía puede volverse problemática. Si se utiliza un enfoque síncrono en estas situaciones, el programa se bloquearía hasta que se complete cada operación, lo que puede afectar negativamente la capacidad de respuesta y la experiencia del usuario.

Por lo tanto, para manejar tareas que llevan tiempo de manera eficiente, es común utilizar enfoques asíncronos, como callbacks, promesas o async/await, que permiten ejecutar operaciones en segundo plano sin bloquear la ejecución del programa principal. Esto mejora la capacidad de respuesta de la aplicación y permite realizar múltiples tareas simultáneamente.

Asincronía

La asincronía en JavaScript se refiere a la capacidad de ejecutar tareas de forma no bloqueante, lo que significa que el programa puede continuar ejecutándose mientras se realizan ciertas operaciones en segundo plano. Esto es especialmente útil para tareas que pueden llevar tiempo, como solicitudes de red, operaciones de archivo o consultas a una base de datos.

JavaScript admite la asincronía utilizando varios mecanismos, entre los que se incluyen:

• Callbacks: Los callbacks son funciones que se pasan como argumentos y se ejecutan después de completarse una operación asíncrona. Permiten definir el comportamiento a ejecutar una vez que la operación asíncrona haya finalizado.

• Promesas: Las promesas son objetos que representan la eventual finalización (o fallo) de una operación asíncrona y permiten realizar un manejo más estructurado de las operaciones asíncronas. Proporcionan métodos como then() y catch() para manejar los resultados y errores de una manera más legible y menos anidada.

• Async/await: El enfoque async/await es una forma más moderna de trabajar con asincronía en JavaScript. Permite escribir código asíncrono que se parece más a un código síncrono, lo que facilita su lectura y comprensión. Las funciones async se utilizan para definir operaciones asíncronas y el operador await se utiliza para esperar la resolución de una promesa antes de continuar con la ejecución.

Estos mecanismos permiten trabajar de forma eficiente con operaciones asíncronas en JavaScript y evitan bloquear la ejecución del programa mientras se realizan estas tareas. La asincronía es fundamental para desarrollar aplicaciones web interactivas, realizar solicitudes de red, operaciones de lectura/escritura de archivos y muchas otras tareas en JavaScript de manera eficiente y sin interrupciones.

Callbacks

En JavaScript, un callback es una función especial que se utiliza como argumento dentro de otra función. La idea principal detrás de los callbacks es permitirnos controlar y manejar el flujo de ejecución de nuestro programa de manera más flexible, especialmente en situaciones en las que tenemos operaciones asincrónicas.

Imagina que tienes una tarea importante que requiere varios pasos. En lugar de esperar a que cada paso se complete antes de pasar al siguiente, puedes utilizar callbacks para especificar qué hacer después de cada paso. De esta manera, puedes seguir trabajando en otras cosas mientras esperas que se completen las operaciones asincrónicas.

Por ejemplo, supongamos que tienes una función que realiza una solicitud a un servidor para obtener datos. En lugar de bloquear todo el programa hasta que se obtengan los datos, puedes proporcionar un callback para que se ejecute una vez que se reciban los datos. Esto permite que el programa continúe su ejecución sin interrupciones y que realice acciones específicas una vez que los datos estén disponibles.

El uso de callbacks puede parecer un poco confuso al principio, pero es una parte fundamental del desarrollo en JavaScript. Con el tiempo, te darás cuenta de que los callbacks te brindan una gran flexibilidad y te permiten escribir código más eficiente y escalable.

Ejemplo:

    function saludar(nombre, callback) {
    const mensaje = `¡Hola, ${nombre}!`;

    // Invocamos al callback después de 2 segundos
    setTimeout(function() {
        callback(mensaje);
    }, 2000);
    }

    function mostrarSaludo(saludo) {
    console.log(saludo);
    }

    saludar('Juan', mostrarSaludo);

Promesas

Las promesas en JavaScript son objetos que representan la finalización (o el fracaso) eventual de una operación asincrónica. Proporcionan una sintaxis más clara y legible para manejar tareas asíncronas en comparación con los callbacks anidados.

Una promesa puede estar en uno de los tres estados:

Pendiente (pending): Estado inicial de la promesa, es decir, la operación asincrónica aún no se ha completado. Cumplida (fulfilled): La operación asincrónica se completó con éxito y se resolvió la promesa. Rechazada (rejected): La operación asincrónica falló y se rechazó la promesa.

Ejemplo básico de una promesa:

const promesa = new Promise((resolve, reject) => {
  // Simulación de operación asincrónica
  setTimeout(() => {
    const exito = true; // Cambiar a false para simular un error

    if (exito) {
      resolve('Operación completada exitosamente');
    } else {
      reject('Ocurrió un error en la operación');
    }
  }, 2000);
});

promesa
  .then((resultado) => {
    console.log(resultado);
  })
  .catch((error) => {
    console.error(error);
  });

En este ejemplo, creamos una promesa utilizando el constructor Promise. Dentro de la función pasada al constructor, simulamos una operación asincrónica utilizando setTimeout. Si la operación se completa correctamente, resolvemos la promesa utilizando la función resolve, pasando un mensaje de éxito. De lo contrario, rechazamos la promesa utilizando la función reject, pasando un mensaje de error.

Luego, encadenamos los métodos then y catch a la promesa. El método then se ejecutará cuando la promesa se resuelva, recibiendo el resultado pasado a resolve. El método catch se ejecutará si la promesa es rechazada, recibiendo el error pasado a reject.

Async - Await

El uso de async y await en JavaScript es una forma más moderna y legible de trabajar con operaciones asíncronas. async se utiliza para declarar una función asíncrona, mientras que await se utiliza dentro de una función asíncrona para esperar la resolución de una promesa antes de continuar con la ejecución. Esta combinación hace que el código asincrónico se vea y se comporte de manera más similar al código síncrono, lo que facilita su comprensión.

function obtenerDatos() {
  return new Promise((resolve, reject) => {
    // Simulación de operación asincrónica
    setTimeout(() => {
      const datos = { nombre: 'Juan', edad: 25 };
      resolve(datos);
    }, 2000);
  });
}

async function mostrarDatos() {
  try {
    const datos = await obtenerDatos();
    console.log(datos);
  } catch (error) {
    console.error(error);
  }
}

mostrarDatos();

API