Promesas (Promises)

Fundamentos de Promesas

• Estados: pending (pendiente), fulfilled (resuelta), rejected (rechazada).
• Encadenamiento: then recibe el valor resuelto y devuelve otro valor o promesa. Si devuelve un valor, la promesa siguiente se resuelve con ese valor.
• Errores: catch captura errores en cualquier punto de la cadena. Un error lanzado dentro de then salta al primer catch.
• Limpieza: finally se ejecuta siempre, ideal para ocultar loaders.
• Promesa "envolvente": Si devuelves una promesa dentro de then, la cadena espera a que esa promesa termine.

javascript
Copiar
1const promesa = new Promise((resolve, reject) => {
2  setTimeout(() => resolve("OK"), 1000);
3});
4
5promesa
6  .then((res) => res + "!")
7  .then((res) => console.log(res))
8  .catch((err) => console.error(err))
9  .finally(() => console.log("Fin"));

Encadenamiento

• Pasar datos entre .then() para crear flujos secuenciales.
• Mejor legibilidad que los callbacks anidados.
• Regla clave: cada then debe devolver algo (valor o promesa) para mantener el flujo.

javascript
Copiar
1const getUser = () => Promise.resolve({ id: 1 });
2const getPosts = (id) => Promise.resolve(["a", "b"]);
3
4getUser()
5  .then((u) => getPosts(u.id))
6  .then((posts) => console.log("Posts:", posts))
7  .catch((err) => console.error("Fallo:", err));

Combinadores

• Promise.all: Espera todas; si una falla, falla todo. Útil cuando necesitas todos los datos.
• Promise.allSettled: Espera todas sin importar fallos. Útil para mostrar resultados parciales.
• Promise.race: Devuelve la primera en completarse (éxito o error). Útil para timeouts.
• Promise.any: Devuelve la primera que se resuelve correctamente; si todas fallan, lanza error.

javascript
Copiar
1const a = fetch("/api/a");
2const b = fetch("/api/b");
3
4Promise.all([a, b]).then(async ([ra, rb]) => {
5  const dataA = await ra.json();
6  const dataB = await rb.json();
7  console.log(dataA, dataB);
8});
9
10const timeout = new Promise((_, reject) =>
11  setTimeout(() => reject("Timeout"), 2000)
12);
13Promise.race([fetch("/api"), timeout]);

javascript
Copiar
1// allSettled para mostrar resultados parciales
2Promise.allSettled([fetch("/a"), fetch("/b")]).then((results) => {
3  results.forEach((r) => console.log(r.status));
4});

javascript
Copiar
1// any: primera promesa resuelta correctamente
2Promise.any([
3  Promise.reject("Error A"),
4  Promise.resolve("OK B"),
5]).then((v) => console.log(v));