Promise Best Practices in JavaScript

Promise Best Practices in JavaScript

Promises are powerful. Here are the best practices to use them well and avoid common pitfalls.

1. Always Handle Errors

// good: .catch or try/catch
fetchP("/api")
  .then((data) => render(data))
  .catch((err) => handleError(err));

// or with async/await
async function main() {
  try {
    const data = await fetchP("/api");
    render(data);
  } catch (err) {
    handleError(err);
  }
}
``
### 2. Chain Flatly (No Nesting)

```js
// good: flat chain
fetchP("/api")
  .then((data) => processP(data))
  .then((result) => renderP(result));

// bad: nesting
fetchP("/api").then((data) => {
  processP(data).then((result) => {
    renderP(result);
  });
});
``
### 3. Always Return From .then

```js
// good
promise.then((data) => process(data));

// bad: no return
promise.then((data) => { process(data); });
``
### 4. Use async/await for Readability

```js
// clean
async function main() {
  const data = await fetchP("/api");
  const result = await processP(data);
  render(result);
}
``
### 5. Use Promise.all for Parallel Operations

```js
const [a, b, c] = await Promise.all([fetchA(), fetchB(), fetchC()]);
``
### 6. Use Promise.allSettled for Partial Failure

```js
const results = await Promise.allSettled([fetchA(), fetchB(), fetchC()]);
results.forEach((r) => {
  if (r.status === "fulfilled") console.log(r.value);
  else console.error(r.reason);
});
``
### 7. Do Not Wrap Promises in new Promise

```js
// bad
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    fetch(`/api/${id}`).then(resolve).catch(reject);
  });
}

// good
function fetchUser(id) {
  return fetch(`/api/${id}`);
}
``
### 8. Use Promise.resolve/Promise.reject for Early Returns

```js
function getUser(id) {
  if (cache[id]) return Promise.resolve(cache[id]);
  return fetchUser(id);
}
``
### 9. Use .finally for Cleanup

```js
showSpinner();
fetchP("/api")
  .then((data) => render(data))
  .catch((err) => handleError(err))
  .finally(() => hideSpinner());
``
### 10. Avoid Sequential await for Independent Operations

```js
// bad: sequential
const a = await fetchA();
const b = await fetchB();

// good: parallel
const [a, b] = await Promise.all([fetchA(), fetchB()]);
``
### The Takeaway

Promise best practices: always handle errors (.catch or try/catch), chain flatly (no nesting), always return from .then, use async/await for readability, use Promise.all for parallel, Promise.allSettled for partial failure, do not wrap promises in new Promise, use Promise.resolve/reject for early returns, use .finally for cleanup, and parallelize independent operations.