Introducción

JavaScript es un lenguaje de programación de un solo subproceso, lo que significa que solo puede ejecutar una tarea a la vez. Esto se vuelve complicado con operaciones asincrónicas como recuperar datos o configurar temporizadores, que pueden bloquear el flujo de ejecución y ralentizar tu aplicación.

Para manejar estas tareas asíncronas sin congelar el hilo, encontramos Promise, una poderosa herramienta que simplifica la programación asincrónica. Con Promises, puedes gestionar tareas de larga duración de forma más eficaz, escribir código más limpio y legible y evitar el temido "infierno de devolución de llamadas."

En este artículo, mi objetivo es familiarizarte con qué son las Promesas, cómo funcionan y cómo simplifican la programación asincrónica.

¿Qué es una promesa?

Imagina que estás pidiendo comida en un restaurante. Una vez que haya realizado su pedido, no tendrá que esperar en la cocina a que le preparen la comida. En lugar de eso, continúas conversando o disfrutas del ambiente mientras la cocina prepara tu comida de fondo. El restaurante se compromete a servirte la comida una vez que esté lista. Puedes confiar en esta promesa porque, eventualmente, sucederá una de dos cosas: o tu comida llegará (cumplida), o la cocina te informará que no pueden completar el pedido (rechazada ).

En JavaScript, Las promesas funcionan de manera similar. Cuando le pides a JavaScript que haga algo que lleva tiempo, como recuperar datos de un servidor, devuelve una Promesa. Esta Promesa no le da el resultado inmediatamente. En cambio, le dice: "Me comunicaré con usted cuando el trabajo esté terminado.". Durante ese tiempo, el resto de su código continúa ejecutándose. Una vez completada la tarea, la Promesa es:

• Cumplido (la tarea se realizó correctamente), o
• Rechazada (la tarea falló) y puedes gestionar el resultado en consecuencia.

Cómo funcionan las promesas en JavaScript

Una Promesa representa un valor que puede estar disponible ahora, en el futuro o nunca. Tiene tres estados:

• Pendiente: La tarea aún está en progreso y el resultado final (cumplido o rechazado) aún no está determinado.
• Cumplido: La tarea se completó correctamente y el resultado está disponible.
• Rechazado: La tarea falló y hay un error disponible para manejar

1. Creando una promesa

Para crear una Promise, utiliza el constructor Promise, que toma una función (conocida como ejecutor) que tiene dos parámetros: resolver y rechazar. La función de resolución se llama cuando se cumple la Promesa, mientras que la función de rechazo se llama cuando se rechaza.

const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});

2. Resolver y rechazar promesas

Una vez creada una Promesa, puedes decidir su resultado llamando a resolver o rechazar:

• resolver (valor): llame a esta función cuando la operación asincrónica se complete correctamente. Pasa un valor a los controladores que están esperando que se cumpla la Promesa.
• rechazar (error): llame a esta función cuando la operación falle. Pasa un mensaje de error a los controladores que están esperando que se rechace la Promesa.

3. Consumir promesas

Una vez que hayas creado una Promesa, el siguiente paso es consumirla. JavaScript proporciona varios métodos para manejar los resultados de las Promesas: .then(), .catch() y .finally(). Cada uno de estos métodos tiene un propósito específico y le permite administrar eficazmente los resultados de las operaciones asincrónicas.

• Manejo de promesas resueltas con .then(): El método .then() se utiliza para especificar qué debe suceder cuando se cumple una Promesa. Se necesitan dos argumentos opcionales: una devolución de llamada para el valor resuelto y otra para manejar los rechazos.

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
};

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  });

• Manejo de rechazos con .catch(): El método .catch() está diseñado específicamente para manejar errores que ocurren durante la ejecución de la Promesa. Esto lo convierte en una forma limpia de lidiar con los rechazos.

const fetchWithError = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error fetching data."); // Simulating an error
    }, 1000);
  });
};

fetchWithError()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error); // Logs: Error fetching data.
  });

• Acciones finales o de limpieza usando .finally(): El método .finally() le permite ejecutar código después de que la Promesa se haya establecido, independientemente de si se cumplió o rechazó. Esto es útil para acciones o tareas de limpieza que deben ejecutarse tanto en escenarios de éxito como de fracaso.

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  })
  .catch(error => {
    console.error(error); // Handle error
  })
  .finally(() => {
    console.log("Promise has settled."); // Logs after either success or failure
  });

Para ser conciso:

• then(): Utilice este método para manejar el valor resuelto de una Promesa.
• catch(): utilice este método para manejar errores cuando se rechaza una Promesa.
• finalmente(): este método ejecuta código después de que se establece la Promesa, independientemente del resultado, lo que permite la limpieza o acciones finales.

4. Encadenamiento de promesas

Una de las características más poderosas de Promises es su capacidad de encadenarse, lo que le permite realizar múltiples operaciones asincrónicas en secuencia. Esto significa que cada operación espera a que se complete la anterior antes de ejecutarse, lo cual es particularmente útil cuando las tareas dependen unas de otras.

Veamos el siguiente ejemplo:

const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ userId: 1, username: "JohnDoe" });
    }, 1000);
  });
};

const fetchPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts
    }, 1000);
  });
};

// Chaining Promises
fetchUserData()
  .then(user => {
    console.log("User fetched:", user);
    return fetchPosts(user.userId); // Pass userId to the next promise
  })
  .then(posts => {
    console.log("Posts fetched:", posts);
  })
  .catch(error => {
    console.error("Error:", error);
  });

En este ejemplo, la función fetchUserData devuelve una Promesa que se resuelve con información del usuario. Luego, el valor resuelto se pasa a la función fetchPosts, que devuelve otra Promise. Si alguna de estas Promesas se rechaza, el error se detecta en el método .catch() final, lo que permite un manejo efectivo de errores en toda la cadena.

Conclusión

En conclusión, las promesas son una parte crucial del JavaScript moderno, ya que permiten a los desarrolladores manejar operaciones asincrónicas de una manera más estructurada y eficiente. Al utilizar Promesas, puedes:

• Simplifica la gestión de tareas asincrónicas y evita el infierno de las devoluciones de llamadas.
• Encadene múltiples operaciones asincrónicas para mantener un flujo de ejecución claro.
• Maneje los errores de manera efectiva con un enfoque unificado.

A medida que implementes Promesas en tus propios proyectos, descubrirás que no solo mejoran la legibilidad del código, sino que también mejoran la experiencia general del usuario al mantener la capacidad de respuesta de tus aplicaciones. Espero que este viaje a través de los conceptos fundamentales de JavaScript haya proporcionado información valiosa para los desarrolladores. ¡Feliz codificación!