Conoce las 4 trampas de JavaScript Promises más comunes (y cómo evitarlas)

El trabajar con Promises en JavaScript puede parecer sencillo hasta que las cosas no funcionan como esperabas. Ya sea que estés usando .then() o async/await, hay errores clásicos que incluso desarrolladores experimentados siguen cometiendo.

Aquí van 4 problemas clave que te pueden ahorrar tiempo, frustración y bugs difíciles de rastrear.

Problema 1: .THEN() siempre devuelve una Promise

Uno de los errores más comunes es envolver una Promise dentro de otra Promise innecesariamente.

// ❌ Esto está de más
firstAjaxCall().then(() => {
  return new Promise((resolve) => {
    nextAjaxCall().then(() => resolve());
  });
});

// ✅ Mucho más limpio
firstAjaxCall().then(() => nextAjaxCall());

Incluso si devuelves un valor plano (no una promesa) .then() lo empaqueta automáticamente en una Promise resuelta.

firstAjaxCall()
  .then((response) => response.importantField)
  .then((field) => console.log(field));

CONSEJO: Usa Promise.resolve(valor) cuando no sepas si tu input es ya una Promise o no.

let processInput = (maybePromise) => {
  let definitelyPromise = Promise.resolve(maybePromise);
  definitelyPromise.then(doSomeWork);
};

Problema 2: .THEN() espera una función, no una ejecución

Mira este clásico error:

// ❌ Esto ejecuta getArticleById(2) *de inmediato*
getAllArticles().then(getArticleById(2));

Lo correcto es pasarle una función, no el resultado de una función.

// ✅ Con arrow function
getAllArticles().then(() => getArticleById(2));

// ✅ O con una función nombrada
let getArticle2 = () => getArticleById(2);
getAllArticles().then(getArticle2);

Extra: Usa async/await para mayor claridad.

async function getSequentially() {
  const articles = await getAllArticles();
  const article = await getArticleById(2);
}

Problema 3: Pasar valores, no funciones, a .THEN()

Este es fácil de confundir cuando encadenas múltiples .then():

// ❌ ¡Esto no funciona como crees!
getAllArticles().then(getArticleById(2)).then((result) => {
  console.log(result);
});

Aquí getArticleById(2) se ejecuta antes de que termine getAllArticles(). Además, el segundo .then() recibe el resultado del primero (que no es lo que esperabas).

La forma correcta sería:

getAllArticles()
  .then(() => getArticleById(2))
  .then((article) => {
    console.log(article);
  });

CONSEJO EXTRA: Usa funciones intermedias para transformar datos.

let extractId = (article) => article.id;
getFirstArticle()
  .then(extractId)
  .then(getCommentsForArticleId);

Problema 4: ASYNC/AWAIT no es concurrente

Un loop con await dentro hace llamadas secuenciales, no paralelas.

// ❌ Esto espera cada llamada una por una
async function getUsersSequentially(ids) {
  const users = [];
  for (const id of ids) {
    const user = await fetchUserData(id);
    users.push(user);
  }
  return users;
}

Es mucho mejor usar Promise.all para correr todas a la vez:

// ✅ Llamadas concurrentes
async function getUsersConcurrently(ids) {
  const promises = ids.map(fetchUserData);
  return await Promise.all(promises);
}

---

Conclusión

Las Promises son fundamentales en JavaScript moderno. Y aunque async/await hace que todo parezca más fácil, sigue siendo esencial entender cómo funcionan internamente para evitar errores sutiles pero peligrosos.

Si evitas estos 4 problemas estarás escribiendo código asincrónico más limpio, claro y confiable.