Explain the different states of a Promise in JavaScript and how to chain multiple Promises with then and catch.

Question

Accepted Answer

A Promise is an object that represents the eventual result of an asynchronous operation. It can be in one of four states.

Pending is the initial state. The operation is neither complete nor failed.

Fulfilled means the operation completed successfully and the Promise has a value.

Rejected means the operation failed and the Promise has a reason for failure.

Settled means the Promise is either fulfilled or rejected, but no longer pending.

To create a Promise, you use the Promise constructor.

const myPromise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve('Operation succeeded');
  } else {
    reject('Operation failed');
  }
});

Chaining with then and catch works as follows. The then method executes when the Promise is fulfilled. The catch method executes when it is rejected.

fetch('/api/users')
  .then(response => {
    console.log('Response received');
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
    return data.length;
  })
  .then(count => {
    console.log('Number of users:', count);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Each then returns a new Promise. The value you return becomes the value of that new Promise. If you return a Promise, the next then waits for it to resolve.

Here is a practical example.

function getUser(id) {
  return fetch('/api/users/' + id)
    .then(res => res.json());
}

function getPosts(userId) {
  return fetch('/api/users/' + userId + '/posts')
    .then(res => res.json());
}

getUser(1)
  .then(user => {
    console.log('User:', user.name);
    return getPosts(user.id);
  })
  .then(posts => {
    console.log('Number of posts:', posts.length);
  })
  .catch(error => {
    // Catches errors from both getUser AND getPosts
    console.error('Error:', error);
  });

The finally method executes regardless of whether the Promise is fulfilled or rejected. It is useful for cleanup.

setLoading(true);

fetch('/api/data')
  .then(res => res.json())
  .then(data => processData(data))
  .catch(err => showError(err))
  .finally(() => setLoading(false));