Frontend Academy · Lección

Promises: then catch finally Promise.all

Cree y encadene Promises, gestione errores en bloques catch, ejecute tareas de limpieza en finally y ejecute varias Promises en paralelo con Promise.all.

Lección 3 de 413 pasos

Promises: then catch finally Promise.all es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es una Promise?

Una Promise representa un valor que estará disponible en el futuro. Es un objeto que se encuentra en uno de tres estados: pendiente (inicial), cumplida (resuelta con un valor) o rechazada (fallida por un motivo). Una vez establecida, el estado de una Promise es permanente.

Crear una Promise

Cree una Promise con el constructor new Promise(executor). La función executor recibe los callbacks resolve y reject. Llame a resolve con el valor del resultado correcto o a reject con un error.

const delay = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

const fetchData = (url) => new Promise((resolve, reject) => {
  fetch(url)
    .then(res => res.json())
    .then(resolve)
    .catch(reject);
});

.then(): gestionar el resultado correcto

promise.then(onFulfilled) registra un callback que se ejecuta cuando la Promise se cumple. Recibe el valor resuelto. .then() devuelve una Promise nueva, lo que permite encadenarlas.

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    console.log('Users:', users);
    return users.length;
  })
  .then(count => console.log('Count:', count));

.catch(): gestionar errores

promise.catch(onRejected) gestiona los rechazos. Al colocarlo al final de una cadena, captura cualquier error de cualquiera de los pasos anteriores.

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => processData(data))
  .catch(err => {
    console.error('Failed:', err.message);
    showErrorToUser();
  });

.finally(): ejecutarse siempre

promise.finally(onFinally) se ejecuta tanto si la Promise se cumple como si se rechaza. Es perfecto para las tareas de limpieza: ocultar un indicador de carga, liberar un bloqueo o registrar análisis.

showSpinner();
fetch('/api/data')
  .then(res => res.json())
  .then(render)
  .catch(handleError)
  .finally(() => hideSpinner()); // always runs

Encadenamiento de Promises: devolver valores

Devuelva un valor desde .then() y se convertirá en el valor resuelto del siguiente .then(). Devuelva una Promise nueva para encadenar operaciones asíncronas de forma secuencial.

getUser(id)
  .then(user => getOrders(user.id))  // return Promise
  .then(orders => orders[0])          // return value
  .then(order => console.log(order)); // receive order

Promise.all(): ejecutar en paralelo

Promise.all([p1, p2, p3]) espera a que se resuelvan todas las Promises y devuelve un array de resultados en el mismo orden. Si alguna Promise se rechaza, todo el conjunto se rechaza de inmediato.

const [user, posts, comments] = await Promise.all([
  fetch('/api/user/1').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
// All three run in parallel — much faster than sequential

Promise.allSettled(): no fallar rápidamente

Promise.allSettled() espera a que todas las Promises se establezcan (se resuelvan o se rechacen) y devuelve un array de objetos de resultado con {status, value} o {status, reason}. Resulta útil cuando no quiere que un solo fallo invalide todos los resultados.

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
  if (result.status === 'fulfilled') use(result.value);
  else logError(result.reason);
});

Promise.race() y Promise.any()

Promise.race() se resuelve o se rechaza con la primera Promise que se establezca. Promise.any() se resuelve con la primera Promise que se cumpla (ignora los rechazos y solo se rechaza si todas se rechazan). Resultan útiles para tiempos de espera y redundancia.

// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);

Crear Promises ya establecidas

Promise.resolve(value) crea una Promise ya cumplida con value. Promise.reject(error) crea una Promise ya rechazada. Resultan útiles para pruebas y funciones adaptadoras.

const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42

Eventos de rechazo no gestionado

Si una Promise se rechaza sin un .catch(), se convierte en un rechazo no gestionado. Los navegadores modernos y Node.js muestran advertencias. Añada siempre un .catch() o utilice try/catch con async/await.

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();
});

Comprobación rápida

¿Qué método estático ejecuta varias Promises en paralelo y se resuelve con un array que contiene todos los resultados?

Responde en la lección interactiva

Resumen: Promises

.then() para resultados correctos, .catch() para errores y .finally() para tareas de limpieza. Las cadenas transmiten valores. Promise.all() ejecuta operaciones en paralelo. Promise.allSettled() tolera fallos parciales. Promise.race() sirve para obtener el resultado más rápido. Gestione siempre los rechazos. El código moderno utiliza async/await como azúcar sintáctico sobre las Promises.

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 41
Lecciones: 163

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Promises: then catch finally Promise.all» es gratis?

Sí — el texto completo de «Promises: then catch finally Promise.all» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Promises: then catch finally Promise.all»?

Cree y encadene Promises, gestione errores en bloques catch, ejecute tareas de limpieza en finally y ejecute varias Promises en paralelo con Promise.all. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Promises: then catch finally Promise.all»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

El event loop: call stack queue microtasks
Callbacks y callback hell
Promises: then catch finally Promise.all
async/await y gestión de errores

← Volver a Frontend Academy