Promesas en JavaScript: estados y métodos

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:36

Promesas en JavaScript: estados y métodos

Curso de Fundamentos de JavaScript

Clase 46 de 55

Clase 46 / 55

Recursos

Las promesas en JavaScript son el mecanismo que convierte tu código síncrono en asíncrono, permitiendo que el navegador trabaje ciertas funciones por separado y devuelva el resultado cuando esté listo. Si estás aprendiendo a manejar peticiones a APIs o tareas que tardan en resolverse, dominar las promesas es el paso que cambia la forma en que escribes JavaScript.

¿Qué es una promesa en JavaScript y para qué sirve?

Una promesa es un objeto que representa el resultado futuro de una operación asíncrona. En lugar de bloquear el call stack esperando a que termine una tarea lenta, le dices al navegador: trabaja esto aparte y avísame cuando esté listo.

¿Qué es una promesa en JavaScript? Es un objeto que representa el resultado eventual de una operación asíncrona. Puede resolverse con éxito o fallar, y tú decides qué hacer en cada caso.

Imagina dos funciones que se disparan de forma asíncrona y, en medio, una promesa. Aunque la promesa se invoque entre ambas, su resultado llega al final, porque es lo último que se resuelve [01:00].

¿Cuáles son los tres estados de una promesa?

Toda promesa atraviesa estados muy concretos durante su ciclo de vida [01:40]. Conocerlos te ayuda a depurar y a anticipar el comportamiento de tu código.

pending: el estado inicial, cuando la promesa se acaba de crear y aún no tiene resultado.
fulfilled: la promesa se resolvió correctamente y entregó un valor.
rejected: la promesa falló y devuelve un error.

Además, las promesas manejan dos callbacks clave: resolve, que se ejecuta cuando todo sale bien, y reject, que entra cuando algo falla [02:30].

¿Qué hacen los métodos then y catch?

Una vez creada la promesa, necesitas reaccionar a su resultado. Para eso existen dos métodos esenciales [02:50]:

then: se ejecuta cuando la promesa se resuelve con éxito. Aquí pones el código que depende del valor devuelto.
catch: se dispara cuando la promesa es rechazada. Te entrega el error para que puedas inspeccionarlo y entender qué falló.

¿Cómo crear una promesa paso a paso con un ejemplo real?

El patrón básico arranca con una constante que instancia un objeto Promise recibiendo dos parámetros: resolve y reject [03:30]. Dentro, se simula una operación asíncrona, normalmente con un setTimeout que actúa como si estuvieras esperando la respuesta de un API.

javascript const promesa = new Promise((resolve, reject) => { setTimeout(() => { const operationSuccessFull = true; if (operationSuccessFull) { resolve("La operación fue exitosa"); } else { reject("La operación falló"); } }, 2000); });

El setTimeout le da dos segundos a la operación antes de decidir si se resuelve o se rechaza [05:30]. Si operationSuccessFull es true, entra al resolve; si es false, dispara el reject.

¿Por qué se usa setTimeout dentro de una promesa? Porque simula el tiempo que tarda una petición real, como una llamada a un API, sin necesidad de hacer una petición verdadera durante la práctica.

¿Cómo obtener el resultado con then y catch?

Llamar a promesa directamente en consola devuelve el objeto con su estado fulfilled o rejected, pero para trabajar con el valor necesitas encadenar los métodos [07:10]:

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

Cuando la operación es exitosa, el then recibe el mensaje y lo imprime. Si algo falla, el catch captura el error para mostrarlo. Esto te permite separar claramente el camino feliz del manejo de errores.

¿Cuándo conviene usar promesas en tu código?

Las promesas brillan cuando trabajas con tareas que no son inmediatas: peticiones HTTP con fetch, lectura de archivos, temporizadores o cualquier operación que dependa de un recurso externo. En lugar de bloquear la ejecución, dejas que el navegador siga atendiendo otras tareas y respondes cuando llega el resultado.

¿Qué pasa si una promesa nunca se resuelve? Se queda en estado pending indefinidamente y los métodos then y catch nunca se ejecutan, lo que puede generar memory leaks o lógica colgada en tu aplicación.

Probar ambos caminos en consola es el mejor ejercicio: cambia operationSuccessFull a false y verás cómo el catch toma el control después de los dos segundos del setTimeout. Ese contraste entre éxito y error es lo que vuelve predecible tu código asíncrono.

¿Ya intentaste construir tu primera promesa? Cuéntame en los comentarios qué operación asíncrona te gustaría modelar.

Juan Miguel Jimenez

Hace 10 meses

Vamos a desglosar este código pieza por pieza usando la analogía de los botones (resolve/reject) y el concepto de callback ("te llamamos luego") que acabamos de ver.

Aquí está lo que sucede paso a paso:

1. El "Contrato" (La Creación)

JavaScript

const promesa = new Promise((resolve, reject) => { ... });

Aquí estás creando la promesa. JavaScript te entrega inmediatamente los dos botones: resolve (botón verde) y reject (botón rojo). Todo el código dentro de las llaves { ... } es la tarea que el "cocinero" va a intentar hacer.

2. La Simulación (El Estado)

JavaScript

const operationSuccessFull = true;

Aquí simplemente definimos una variable para simular el resultado. Al ponerla en true, estamos forzando a que la operación sea exitosa. Es como decirle al cocinero: "Hoy todo va a salir perfecto, no quemes la hamburguesa".

3. La "Espera" Asíncrona (El Callback en acción)

JavaScript

setTimeout(() => { ... }, 2000);

Aquí usamos setTimeout. Esto le dice al navegador: "Pon esta tarea en espera (en la Web API) durante 2 segundos (2000ms), y cuando pase ese tiempo, regresa y ejecuta el código de adentro".

Durante estos 2 segundos, el código no se detiene. JavaScript sigue libre para hacer otras cosas.

4. La Decisión (Presionando el botón)

Pasados los 2 segundos, se ejecuta el callback (la función flecha dentro del setTimeout):

JavaScript

if (operationSuccessFull) {
  resolve('La operación fue exitosa'); // <--- ¡Se presiona este botón!
} else {
  reject('La operación falló');
}

Como operationSuccessFull es true:

Se ejecuta resolve (el botón verde).
Le pasamos el mensaje 'La operación fue exitosa'. Este mensaje es el "paquete" que le enviamos al .then().
La promesa cambia de estado Pending a Fulfilled.

(Si la variable fuera false, se ejecutaría reject, activando el botón rojo y pasando al .catch()).

5. La Reacción (El desenlace)

JavaScript

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

.then: Como presionaste resolve, el código entra automáticamente aquí.
- La variable successMessage recibe el texto 'La operación fue exitosa'.
- Se imprime en consola.
.catch: Como no presionaste reject, este bloque de código es ignorado completamente.

Brayan Steven Rivera Páez

Hace 10 meses

me ayudaste a entender, gracias!

Comentarios (33)33 comentarios

Kevin Vargas Murcia

Hace 2 años

Santiago Ospina

Hace un año

Emanuel Martínez Mena

Hace 9 meses

Sandra Rosa Arroyo Paredes

Camila Jhovanna Arato Cisneros

David Limon

Sebastian Mora Perez

Carlos Barrios

Natalia Gallego Heras

santiago cortes

Jorge Ivan Martinez Guerra

Calvin Rafael Bobadilla Fernandez

Alfonso Galeano Conde

Hace 8 meses

Marco Rodrigo Polo Silva

Daniel Vergel

Hace 3 meses

Nicolas Alejandro Baak Poot

Hace 7 meses

Juan Roberto Adolfo Esquivel Segovia

Samuel Steven Bernal Martínez

David Rangel

JYCC CONSULTORES

Juan Sifuentes

yeferson Atehortua suarez

Leslie Fernández

pedro albenis parrado vargas

Sofia Libertad Montoya Herrera

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Promesas en JavaScript: estados y métodos