Understanding the Three States of Promises in JavaScript

Promises are an essential part of JavaScript programming, especially when dealing with asynchronous operations. Promises are objects that represent a value that may not be available yet, but will be resolved in the future. Promises have three states, which are pending, fulfilled, and rejected. In this article, we will discuss the three states of promises in JavaScript, their significance, and how to use them effectively.

The Three States of Promises

1. Pending

When a promise is created, it is in a pending state. This means that the promise is still waiting for the result of the asynchronous operation that it represents. While in this state, the promise can transition to either the fulfilled or rejected state.

2. Fulfilled

A promise is considered fulfilled when the asynchronous operation it represents has completed successfully. This means that the promise has resolved with a value, which can be accessed using the then() method. Once a promise is fulfilled, it cannot transition to any other state.

3. Rejected

A promise is considered rejected when the asynchronous operation it represents has failed. This means that the promise has been rejected with a reason, which can be accessed using the catch() method. Once a promise is rejected, it cannot transition to any other state.

Using Promises in JavaScript

Promises are used extensively in JavaScript, especially when dealing with asynchronous operations. Here is an example of how to create and use a promise in JavaScript:

const promise = new Promise((resolve, reject) => {
  const randomNumber = Math.floor(Math.random() * 10);

  if (randomNumber % 2 === 0) {
    resolve(`Even number: ${randomNumber}`);
  } else {
    reject(`Odd number: ${randomNumber}`);
  }
});

promise
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

In this example, we create a new promise that generates a random number between 0 and 9. If the number is even, the promise is fulfilled with a message that includes the number. If the number is odd, the promise is rejected with a message that includes the number. We then use the then() method to log the result if the promise is fulfilled, and the catch() method to log the error if the promise is rejected.

Conclusion

Promises are a powerful way to handle asynchronous operations in JavaScript. Understanding the three states of promises is essential to effectively use promises in your code. Remember that promises can only transition from the pending state to either the fulfilled or rejected state, and once a promise is fulfilled or rejected, it cannot transition to any other state. By mastering promises, you can write more efficient and maintainable code in your JavaScript applications.