Ladies and Gentleman, In this post we will understand and master Promises in JavaScript.

What's a Promise? 🧐

A Promise object represents the eventual completion or failure of an asynchronous operation. In simple language, a Promise is data returned by asynchronous functions.

let promise = new Promise((resolve, reject) => {
  // Do something...
});

Promise States 🤔

A promise can have one of these states:

• Pending: This is the initial state
• Fulfilled: Operation completed successfully
• Rejected: Operation failed

Resolve / Reject

The Promise constructor takes in one argument: a callback with two parameters-resolve and reject.

• resolve when the Promise was fulfilles
• reject when something didn't work (e.g. an error ocurred)

General Structure 😳

Take a look at how a Promise is generally structured:

let promise = new Promise((resolve, reject) => {
  // Do something...

    if(/* Everything went fine */) {
      resolve("Task successful!");
    } else {
        // Well... something went wrong
         reject("Something went wrong!");
     }
});

NOW, LET'S RUN THE PROMISE FROM THE ABOVE CODE 😐

promise
  .then((message) => {
     // Print out the message if the
     // promise is fulfilled
     console.log(message);
    })
    .catch((error) => {
       // Catch error is one occurred
       console.log(error); 
     });

---

Here is a simple example of using Promise

let promiseToWashDishes = new Promise((resolve, reject) => {
  // whether the dishes are clean or not
  let clean = true; 

   if(clean) { 
      // Resolve promise if the dishes are clean
      resolve("The dishes are clean!");
     } else {
        // Reject the promise if the dishes are dirty
        reject("The dishes are still dirty!"); 
      }
});

Let's run our example Promise:

promiseToWashDishes
   .then((result) => {
     console.log(`Great! ${result}`);
      // Great! The dishes are clean !
   })
   .catch((result) => {
    console.log(`Oh no! ${result}`);
       // Oh no! The Dishes are still dirty!
    });

---

Real World Example 🤩

Chances are, you have already worked with the Fetch API! It uses Promises, too:

fetch("https://example.com/")
   .then((response) => response.json())
   .then((data) => {
   // Do something with the data...
   })
   .catch((error) => {
     // Something went wrong during the request!
    });

---

Need Help

Need help in raising fund to buy a Mechanical Keyboard. This pandemic has affected my family badly so can't ask my DAD for it. Please Help Me.

---

😁Thanks For Reading | Happy Coding ⚡