Understanding Promise in JavaScript with Real Life Example

JavaScript, as an asynchronous language, relies on promises to manage the execution of non-blocking operations efficiently. If you've ever been puzzled by the concept of promises, fear not! In this blog post, I'll break down the fundamentals of promises in JavaScript and provide you with clear code examples to deepen your understanding.

What are Promises?

Imagine ordering a pizza. You place the order (initiate the asynchronous task) and don't have to wait by the phone. The pizzeria (the asynchronous operation) takes its time preparing your deliciousness. But you don't need to sit there twiddling your thumbs. Promises act like the delivery person. They give you a way to handle the future outcome (receiving the pizza) of the asynchronous task, whether it's success (yummy pizza!) or failure (uh oh, burnt pizza!).

The Promise Lifecycle:

A Promise can be in three states:

Pending: This is the initial state, where the asynchronous task is still running.
Fulfilled: The asynchronous task completed successfully, and the Promise has a value to deliver (your pizza has arrived!).
Rejected: The asynchronous task failed, and the Promise has an error reason (the pizzeria ran out of dough!).

Creating Promises:

We use the Promise constructor to create a Promise object. It takes a function called the executor, which has two arguments:

resolve: A function to call when the asynchronous task succeeds. You pass the resolved value (your pizza) to this function.
reject: A function to call when the asynchronous task fails. You pass the error reason (no dough!) to this function.

Here's a simple example of creating a Promise:

const myPromise = new Promise((resolve, reject) => {
  let condition = true; // This could be any condition

  if(condition) {
    resolve('Promise is resolved successfully.');
  } else {
    reject('Promise is rejected');
  }
});

In this example, we're creating a new Promise that checks a condition. If the condition is true, we call resolve and pass in a success message. If the condition is false, we call reject and pass in a failure message.

Consuming Promises: .then() and .catch()

Once a Promise is resolved or rejected, it's then possible to handle the result with .then for a resolved promise and .catch for a rejected promise. Here's how you can do that:

myPromise
  .then(message => console.log(message)) // This will run if the promise is resolved
  .catch(error => console.log(error)); // This will run if the promise is rejected

In this example, if the Promise myPromise is resolved, the function in the .then block will run, and the message from the resolve function will be logged to the console. If the Promise is rejected, the function in the .catch block will run, and the error message from the reject function will be logged to the console.

Chaining Promises

Promise chaining is a technique where you can chain multiple .then() calls together. Each .then() returns a new Promise that can be used for the next .then(). This is useful when you have a series of asynchronous operations that need to be performed one after the other.

Here's an example:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('First promise resolved');
  }, 1000);
});

const promise2 = msg => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${msg} -> Second promise resolved`);
    }, 1000);
  });
};

promise1
  .then(res => promise2(res))
  .then(finalResult => console.log(finalResult))
  .catch(error => console.log(error));

In this example, promise1 is a Promise that resolves after 1 second. Once promise1 resolves, its result is passed to promise2 through the first .then(). promise2 is a function that returns a new Promise, which also resolves after 1 second. The result of promise2 is then logged to the console in the second .then().

If any Promise in the chain is rejected, the .catch() at the end will handle the error. This is a great advantage of Promise chaining: you can handle all errors in a single .catch() at the end of the chain.

This way, you can chain as many Promises as you need, and they will execute in sequence. This is very useful when you need to perform multiple asynchronous operations in a specific order.

Conclusion

Promises are powerful tools for managing asynchronous operations in JavaScript. By understanding their core concepts and using the provided examples, you can write cleaner, more maintainable code. So, go forth and conquer the asynchronous world with the power of Promises!

Further Exploration:

This post provides a foundational understanding of Promises. For deeper dives, explore topics like:

Promise.all(): Wait for all promises in an iterable to resolve or reject.
Promise.race(): Return the result (resolved or rejected) of the first promise to settle.
async/await syntax (ES2017): A cleaner way to write asynchronous code using Promises.

Happy coding!

If you like this blog, you can visit my personal blog sehgaltech for more content.