I Was Scared of JS Promises In 2017, But I’m Super-Brave in 2020 (Learn My Tricks)

It rained all day and my little sister was terribly bored.

She said, Grand-dad, Please! Tell us a story about the olden days. Grandfather smiled and he began the story,

“Once long ago, when I was a boy, we had No money to pay for daily transport. So i used to Walk to college.

One day my father bought a lotto ticket and promised that he’ll get me a new cycle next week.”

Before my Grandpa could say next word, The doorbell rang…

Ting Tong !

I opened the door , He was my grandpa childhood friend, soon grandpa got busy talking to him.

We also went away to watch our favourite daily soap Shaktiman in our room.

I never got to know what happened next but the promise my great-grand father did had 3 states.

1 – Pending: My grandpa didn’t know if he will get that cycle.

2 – Fulfilled: He wins the lotto , and he buys my grandpa a brand new cycle.

3 – Rejected: He doesn’t wins the lotto, and he could not afford to buy a cycle.

Let's Convert this to a JavaScript Promise:-

I’m a Big fan of official documentation so first, Please take a good look at MDN definition of Promise.

A Promise is a proxy for a value not necessarily known when the promise is created. instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

const newcycle = (lotto) => {
return new Promise((resolve,reject) => {
       if(!lotto) {
           reject(`couldn't afford`) // reject
       } else {
           resolve(`${lotto} lottery got my grandpa brand new cycle`)
         // fulfilled
       }
   })
}
​
// The code above was quite expressive in itself.
​
// consuming promise
​
newcycle('5k ruppese').then((fullfilled) => {
   console.log(fullfilled); // yay, grandpa got a new cycle
})
.catch((err) => console.log(err));
​
// Expected Output = 5k ruppese lottery got my grandpa brand new cycle

How to chain Promise

Let’s Imagine grandpa had promised his college friend, that he will lift him on his Bi-cycle when his father buys him one.

Look at the promise chaining Example

const newcycle = (lotto) => {
return new Promise((resolve,reject) => {
       if(!lotto) {
           reject(`couldn't afford`)
       } else {
           resolve(`${lotto} lottery got my grandpa brand new cycle`)
       }
   })
}
​
const liftFriendOnCycle = () => {
 return new Promise((resolve,reject) => {
   resolve(`Hey friend i got a new cycle`);   
 })}
​
 newcycle('5k ruppese').then(liftFriendOnCycle)
              .then(fullfilled => {
                  console.log(fullfilled)
              } )
              
              .catch(err => console.log(err))
​
// Expected Output = Hey friend i got a new cycle

Last – Rewrite Promise chaining example with ES7 syntax of Async-Await:

const newcycle = (lotto) => {
return new Promise((resolve,reject) => {
       if(!lotto) {
           reject(`couldn't afford`)
       } else {
           resolve(`${lotto} lottery got my grandpa brand new cycle`)
       }
   })
}
​
const liftFriendOnCycle = () => {
 return new Promise((resolve,reject) => {
   resolve(`Hey friend i got a new cycle`);   
 })}
​
 async function ola() {
   try {
       let promise1 = await newcycle('5k')
       let promise2 = await liftFriendOnCycle();
       console.log(promise1)
       console.log(promise2);
   } catch (err){
       console.log(err);
​
   }
}
​
ola();
​
// Expected Output - 5k lottery got my grandpa brand new cycle
// Expected Output - Hey friend i got a new cycle

Thanks for reading, Happy Hacking