Promesas en JavaScript: Asincronía y Manejo de Estados

Clase 46 de 55Curso de Fundamentos de JavaScript

Resumen

¿Qué son las promesas en JavaScript?

Las promesas son una herramienta poderosa para transformar nuestro código de JavaScript de un modelo síncrono a uno asíncrono. Funcionan al indicar al navegador que ciertas funciones deben ejecutarse de manera independiente. Una vez resueltas, las promesas se integran en el call stack para proporcionar un resultado. Mediante su uso, podemos manejar tareas asíncronas de manera más fluida y organizada.

¿Cuáles son los estados de las promesas?

Las promesas presentan tres estados fundamentales durante su ciclo de vida:

  1. Pending (pendiente): Este es el estado inicial. La promesa está creada pero aún no se ha resuelto ni ha fallado.
  2. Fulfilled (resuelta): Indica que la promesa se ha completado con éxito.
  3. Rejected (rechazada): Ocurre cuando la promesa no se puede cumplir, produciendo un error.

¿Qué funciones de callback usan las promesas?

Las promesas trabajan con dos tipos de funciones de callback:

  • Resolve: Se ejecuta cuando la promesa se resuelve exitosamente.
  • Reject: Se activa cuando la promesa no se puede completar, indicando un fallo.

¿Cómo utilizar métodos como then y catch con promesas?

Las promesas vienen con dos métodos esenciales para gestionar su resultado:

  • Then: Se ejecuta cuando la promesa se resuelve. A través de este método, podemos llevar a cabo acciones basadas en el resultado exitoso de una promesa.
  • Catch: Se utiliza para manejar errores. Si la promesa falla, el catch nos proporciona la información necesaria para entender por qué no se resolvió.

Aquí tienes un ejemplo de código ilustrando cómo manejar una promesa asíncrona aprovechando un setTimeout:

const promesa = new Promise((resolve, reject) => {
  const operationSuccessFull = true;

  setTimeout(() => {
    if (operationSuccessFull) {
      resolve('La operación fue exitosa');
    } else {
      reject('La operación falló');
    }
  }, 2000);
});

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

¿Cómo crear y manejar promesas en JavaScript?

Crear una promesa implica declarar una constante e instanciar una nueva promesa, donde especificamos las funciones resolve y reject que manejarán el resultado. Dentro, podemos simular, por ejemplo, una petición a un API usando un setTimeout. Este temporizador nos permite retrasar la ejecución, indicando un manejo asíncrono:

const myPromise = new Promise((resolve, reject) => {
  let mockApiResponse = true; // Simulación de una respuesta de API

  setTimeout(() => {
    if (mockApiResponse) {
      resolve('Operación completada con éxito');
    } else {
      reject('Error en la operación');
    }
  }, 3000);
});

// Uso de then y catch para manejar el resultado
myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error));

Este ejemplo demuestra el uso básico de promesas para ejecutar un código asíncrono que resuelve una operación tras un retraso. Mediante las funciones then y catch, capturamos y gestionamos los resultados de una acción, ya sea exitosa o fallida. Con esta base, podrás implementar flujos más complejos en tus proyectos de JavaScript, mejorando el rendimiento y la experiencia de usuario.