Promises in JavaScript

Promises in JavaScript


Promises in JavaScript are a powerful tool for managing asynchronous operations, allowing developers to write cleaner, more manageable code.

What is a Promise?

A Promise is an object representing the eventual completion or failure of an asynchronous operation. A Promise holds a value that might be available now, later, or never. It represents the idea of promising to do something. Promises have three states:

  • Pending: Initial state, neither fulfilled nor rejected.

  • Fulfilled: The operation completed successfully.

  • Rejected: The operation failed.

Consider the following example where a Promise resolves another Promise:

new Promise((resolveOuter) => {
    new Promise((resolveInner) => {
      setTimeout(resolveInner, 1000);

In this case, the outer Promise is pending until the inner Promise resolves. The completion of the inner Promise after 1 second fulfills the outer Promise.

Chaining Promises

Promises can be chained to perform sequential asynchronous operations. Methods like .then(), .catch(), and .finally() enable this chaining:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
  }, 300);

  .finally(() => console.log('Operation completed.'));
  • .then() executes a callback on Promise fulfillment or rejection.

  • .catch() is a shorthand for handling rejections.

  • .finally() executes after the Promise settles, regardless of its outcome.

Handling Multiple Promises

JavaScript provides several methods to deal with multiple Promises concurrently:

  • Promise.all() waits for all promises to be resolved or for any to be rejected. Helpful for combining the outcomes of several promises.

      Promise.all([promise1, promise2]).then((results) => {
        const [result1, result2] = results;
        console.log(result1, result2);
  • Promise.allSettled() waits for all promises to settle, regardless of the outcome. Each promise's result is provided, indicating success or failure.

      Promise.allSettled([promise1, promise2]).then((results) => results.forEach((result) => console.log(result.status)));
  • Promise.race() waits for the first promise to settle, either fulfilled or rejected. This is useful for timeout patterns.

      Promise.race([promise1, promise2]).then((result) => console.log(result));
  • Promise.any() waits for the first promise to fulfill, ignoring all rejections unless all promises are rejected.

      Promise.any([promise1, promise2]).then((result) => console.log(result));

Async/Await: Syntactic Sugar for Promises

Async/await syntax offers a cleaner, more readable way to work with Promises, making asynchronous code appear synchronous:

async function fetchData() {
  try {
    const data = await fetch('');
    console.log(await data.json());
  } catch (error) {
    console.error('Failed to fetch data:', error);
  • An async function implicitly returns a Promise.

  • The await keyword pauses the function execution until the Promise settles.

  • Use try/catch blocks to handle potential rejections.

Concurrent Execution with Async/Await

To run Promises concurrently within an async function, utilize Promise.all():

async function fetchMultipleData() {
  try {
    const [dataA, dataB] = await Promise.all([fetchDataA(), fetchDataB()]);
    console.log(dataA, dataB);
  } catch (error) {
    console.error('Failed to fetch data:', error);

This approach ensures that dataA and dataB are fetched in parallel, optimizing performance.