Common Promise Mistakes in JavaScript

Common Promise Mistakes in JavaScript

Promises are powerful but have common pitfalls. Here are the mistakes and how to avoid each.

Mistake 1: Not Returning in .then

// bad: no return
promise.then((data) => { process(data); });

// good: return
promise.then((data) => process(data));
``
If you do not return, the next `.then` receives `undefined`.

### Mistake 2: Forgetting .catch

```js
// bad: no .catch (unhandled rejection)
fetchP("/api").then((data) => render(data));

// good: add .catch
fetchP("/api").then((data) => render(data)).catch((err) => handleError(err));
``
Unhandled rejections are warnings in browsers and crashes in Node.js.

### Mistake 3: Nested .then (Mini Callback Hell)

```js
// bad: nesting
fetchP("/api").then((data) => {
  processP(data).then((result) => {
    render(result);
  });
});

// good: chain
fetchP("/api")
  .then((data) => processP(data))
  .then((result) => render(result));
``
### Mistake 4: Using .then for Errors Instead of .catch

```js
// less readable
promise.then(
  (data) => render(data),
  (err) => handleError(err)
);

// cleaner
promise.then((data) => render(data)).catch((err) => handleError(err));
``
`.catch` catches errors from anywhere in the chain, not just the original promise.

### Mistake 5: Sequential Instead of Parallel

```js
// slow: sequential
const a = await fetchA();
const b = await fetchB();
const c = await fetchC();

// fast: parallel
const [a, b, c] = await Promise.all([fetchA(), fetchB(), fetchC()]);
``
### Mistake 6: Not Using async/await

```js
// verbose
fetchP("/api")
  .then((data) => processP(data))
  .then((result) => renderP(result))
  .catch((err) => handleError(err));

// clean
async function main() {
  try {
    const data = await fetchP("/api");
    const result = await processP(data);
    await renderP(result);
  } catch (err) {
    handleError(err);
  }
}
``
### Mistake 7: Creating Unnecessary Promises

```js
// bad: wrapping a promise in a promise
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    fetch(`/api/${id}`)
      .then((res) => resolve(res.json()))
      .catch((err) => reject(err));
  });
}

// good: just return the promise
function fetchUser(id) {
  return fetch(`/api/${id}`).then((res) => res.json());
}
``
### The Takeaway

Common promise mistakes: not returning in `.then`, forgetting `.catch`, nesting `.then` (mini callback hell), using `.then`'s second arg instead of `.catch`, sequential instead of parallel, not using async/await, and wrapping promises in unnecessary `new Promise`. Return, chain flatly, catch errors, parallelize, and use async/await.