DEV Community

Cover image for JavaScript Promises
Abdul Ghafoor
Abdul Ghafoor

Posted on

JavaScript Promises

What is a Promise?

A Promise is an object that represents the result of an asynchronous operation.

It can be:

  • Pending (waiting)
  • Fulfilled (success)
  • Rejected (error) Used for: API calls, database queries, file reading, timers, etc. Promise States: Pending → initial state Fulfilled → operation successful Rejected → operation failed const promise = new Promise((resolve, reject) => {}); Basic Structure
new Promise((resolve, reject) => {
  // executor runs immediately
});
Enter fullscreen mode Exit fullscreen mode

👉 Executor runs synchronously

resolve & reject

resolve()
Marks success
resolve("Success");

reject()
Marks failure

reject("Error");
⚠️ Only the first call matters (resolve or reject)

then, catch, finally

then()
Handles success
promise.then(result => console.log(result));
catch()
Handles errors
promise.catch(error => console.log(error));
finally()
Runs in both success & failure
promise.finally(() => console.log("Done"));

Important Behavior

new Promise((resolve, reject) => {
  resolve("A");
  reject("B"); // ignored
});
Enter fullscreen mode Exit fullscreen mode

👉 First settle wins

Promise Chaining

Promise.resolve(2)
  .then(x => x * 2)
  .then(x => x + 6)
  .then(console.log);
Enter fullscreen mode Exit fullscreen mode

Output:10

Promise.resolve vs resolve

resolve (inside Promise)

new Promise(resolve => resolve("Done"));

Promise.resolve (shortcut)
Promise.resolve("Done");

setTimeout vs Promise

Wrong
function getUser() {
setTimeout(() => 3, 1000);
}

Returns: undefined

Correct

function getUser() {
  return new Promise(resolve => {
    setTimeout(() => resolve(3), 1000);
  });
}
Enter fullscreen mode Exit fullscreen mode

async / await

Cleaner way to use Promises.

async function main() {
  const data = await getUser();
  console.log(data);
}
Enter fullscreen mode Exit fullscreen mode

👉 await = cleaner .then()

Promise.all vs Promise.allSettled

Promise.all()

  • Fails if any promise fails
  • All must succeed Promise.all([p1, p2]);

Promise.allSettled()

  • Waits for all results
  • Never fails completely

Promise.allSettled([p1, p2]);

Key Differences

The key difference between Promise.all() and Promise.allSettled() lies in how they handle failures and results. With Promise.all(), the execution stops immediately if any one promise fails, meaning it follows a fail-fast approach and returns either all successful results or nothing. In contrast, Promise.allSettled() does not stop on failure; it waits for all promises to complete regardless of whether they are fulfilled or rejected, and then returns the outcome of every promise.

Summary

  • Promise = async result handler
  • Executor runs immediately
  • Only one outcome (resolve/reject)
  • then/catch/finally are async
  • async/await simplifies Promises
  • Promise.all = fail-fast
  • Promise.allSettled = always complete

For more details, check out the GitHub repository. It includes detailed explanations along with executed examples in the same repo.

Top comments (0)