Hey Paramveer

Promises in JavaScript: A Complete Guide

Written by

Paramveer Singh

in

Asynchronous operations are a core part of modern web development. From fetching data from APIs to performing delayed tasks, handling these operations efficiently is crucial. Promises in JavaScript provide a clean, powerful way to manage asynchronous code. In this guide, we’ll explore everything you need to know about promises.

1. What Is a Promise?

A promise is an object representing the eventual completion or failure of an asynchronous operation. It can be in one of three states:

  1. Pending: The initial state; the operation hasn’t completed yet.
  2. Fulfilled: The operation completed successfully, producing a result.
  3. Rejected: The operation failed, producing an error.

2. Creating a Promise

You can create a promise using the Promise constructor:

const myPromise = new Promise((resolve, reject) => {
  const success = true;

  setTimeout(() => {
    if (success) {
      resolve('Operation successful!');
    } else {
      reject('Operation failed!');
    }
  }, 1000);
});
  • resolve() marks the promise as fulfilled.
  • reject() marks the promise as rejected.
  • The executor function runs immediately when the promise is created.

3. Consuming Promises with .then() and .catch()

Promises are consumed using .then() for success and .catch() for errors:

myPromise
  .then((message) => {
    console.log('Success:', message);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
  • .then() handles the fulfilled state.
  • .catch() handles the rejected state.
  • Chaining .then() allows sequential asynchronous operations.

4. Chaining Promises

You can chain multiple .then() calls to perform consecutive asynchronous tasks:

fetch('https://api.example.com/users')
  .then((response) => response.json())
  .then((data) => {
    console.log('Users:', data);
    return fetch('https://api.example.com/posts');
  })
  .then((response) => response.json())
  .then((posts) => console.log('Posts:', posts))
  .catch((error) => console.error('Error:', error));
  • Each .then() receives the result of the previous promise.
  • Errors anywhere in the chain are caught by a single .catch().

5. Promise Methods

JavaScript provides utility methods for working with multiple promises:

  • Promise.all() – waits for all promises to resolve; rejects if any fail.
Promise.all([promise1, promise2])
  .then((results) => console.log('Results:', results))
  .catch((error) => console.error(error));
  • Promise.race() – resolves/rejects as soon as one promise settles.
Promise.race([promise1, promise2])
  .then((result) => console.log('First settled:', result))
  .catch((error) => console.error(error));
  • Promise.allSettled() – waits for all promises to settle, regardless of outcome.
  • Promise.any() – resolves when the first promise fulfills; rejects if all fail.

6. Converting Callback-Based Code to Promises

Promises help modernize code that previously relied on callbacks:

function fetchData(callback) {
  setTimeout(() => {
    callback(null, 'Data received');
  }, 1000);
}

// Using Promises
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
}

fetchDataPromise().then(console.log);
  • Promises reduce callback hell and improve readability.

7. Best Practices for Using Promises

  • Always handle errors with .catch() or try...catch when using async/await.
  • Chain promises instead of nesting callbacks.
  • Use Promise.all for parallel async operations.
  • Avoid creating unnecessary promises inside loops.

8. Wrapping Up

Promises are a fundamental part of modern JavaScript. They provide a clean and readable way to handle asynchronous operations, manage errors, and chain tasks. Mastering promises will make your code more efficient, maintainable, and easier to debug.

Next Step: Explore async/await, which is built on promises and allows writing asynchronous code that looks synchronous.

More posts