¿Cómo funciona el patrón Promise?

| Última modificación: 15 de marzo de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

En el emocionante mundo de la programación, especialmente en el desarrollo web, nos encontramos con situaciones en las que debemos trabajar con tareas asíncronas. Esto significa que en lugar de ejecutar una tarea de manera secuencial, como una instrucción tras otra, algunas tareas pueden tomar un tiempo desconocido y deben manejarse de manera no bloqueante. Aquí es donde entra en juego el patrón Promise, una herramienta esencial para gestionar estas tareas asíncronas de manera efectiva. En este artículo, exploraremos cómo funciona este patrón y cómo puede ayudar a gestionar el flujo de trabajo en el desarrollo web.

Comprendiendo el patrón Promise

El patrón Promise es un concepto fundamental en JavaScript que ayuda a gestionar el resultado de tareas asíncronas. En esencia, un Promise es un objeto que representa un valor que puede estar disponible ahora, en el futuro o nunca. Esta abstracción permite que el código sea más legible y estructurado cuando se trabaja con tareas asíncronas.

Los tres parámetros

Un objeto Promise puede estar en uno de tres estados:

  1. Pending: este es el estado inicial de un Promise, cuando la tarea aún no se ha completado.
  2. Fulfilled: el Promise pasa a este estado cuando la tarea se completa con éxito. En este caso, el objeto Promise contiene el resultado de la tarea.
  3. Rejected: si ocurre un error durante la ejecución de la tarea, el Promise se convierte en este estado. En este caso, el objeto Promise contiene información sobre el error.

Creando un Promise

Para crear un objeto Promise en JavaScript, se utiliza la siguiente sintaxis:

const miPromise = new Promise((resolve, reject) => { 
// Código para realizar una tarea asíncrona 
// Si la tarea se completa con éxito, llamamos a resolve con el resultado. 
// Si ocurre un error, llamamos a reject con el motivo del error. 
});

Gestionando el resultado

Una vez que tenemos un objeto Promise, podemos utilizar los métodos .then() y .catch() para gestionar el resultado.

  • .then(): se utiliza cuando la tarea se completa con éxito y queremos realizar una acción con el resultado.
  • .catch(): se utiliza para manejar errores que puedan ocurrir durante la ejecución de la tarea.
miPromise 
.then((resultado) => { 
// Hacer algo con el resultado 
}) 
.catch((error) => { 
// Manejar el error 
});

Aplicaciones prácticas en desarrollo web

El patrón Promise es especialmente útil en situaciones donde se realizan peticiones asíncronas, como solicitar datos de un servidor o cargar contenido de forma dinámica en una página web. En lugar de bloquear el flujo de ejecución, podemos usar Promises para realizar estas tareas de manera eficiente y mantener nuestro código organizado.

Por ejemplo, al enviar un formulario que contiene una dirección de correo electrónico, podemos usar un Promise para esperar la respuesta del servidor. Esto evita que la página se bloquee mientras se envía la solicitud y nos permite mostrar un mensaje de éxito o error una vez que se recibe la respuesta.

Esta situación es muy común en aplicaciones web modernas, donde los usuarios interactúan con formularios para realizar diversas acciones, como registrarse, enviar mensajes o actualizar información de perfil.

Cuando un usuario llena un formulario y hace clic en el botón “Enviar”, se inicia una operación de envío de datos al servidor. Sin el uso de Promises, esta operación podría bloquear la página web mientras espera la respuesta del servidor. Esto significa que el usuario vería una pantalla en blanco o de carga durante un tiempo incierto, lo que no brinda una experiencia amigable ni atractiva.

En resumen, el patrón Promise es una herramienta esencial en el arsenal de cualquier desarrollador web. Ayuda a gestionar tareas asíncronas de manera eficiente, lo que es crucial en un entorno web donde la velocidad y la capacidad de respuesta son fundamentales. Al comprender y aplicar este patrón Promise, los desarrolladores pueden escribir un código más limpio y mantenible, lo que resulta en una experiencia de usuario más fluida y satisfactoria.

El patrón Promise simplifica el desarrollo web

Si estás interesado en el desarrollo web y deseas aprender más sobre el patrón Promise y otras tecnologías esenciales, considera unirte al Desarrollo Web Full Stack Bootcamp. Nuestro bootcamp te proporcionará las habilidades y el conocimiento necesarios para sobresalir en la industria tecnológica, que está en constante crecimiento y ofrece oportunidades de carrera emocionantes. Al finalizar el bootcamp, estarás preparado para entrar en el sector IT, donde los profesionales altamente capacitados son muy demandados, lo que se traduce en salarios competitivos y una estabilidad laboral que otros sectores no pueden igualar. ¡No dejes pasar esta oportunidad para cambiar tu vida y unirte al emocionante mundo del desarrollo web!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado