Uncategorized

java script callback vs promise vs async-await explanation with real time scenario

​Hi, Today i want to show how to use callback, convert call back code to promise and promise code to async await.

Scenario: i want to cook food and then want to east. to cook food we have to follow some steps and all steps have some time

  • Preparation of materials to cook food take some time for example 2000ms
  • frying them take some time for example 1000ms
  • Cooking them them take some time for example 3000ms
  • Finally want to EAT in 500ms

Let us see. Here written JS Functions for them. and now see the output for the same

/** 
 * Problem with Java Script
*/
let preparation=function(){
    setTimeout(()=>{
        console.log(‘preparation’);
    },2000)    
}

let frying=function(){
    setTimeout(()=>{
        console.log(‘frying’);
    },1000)    
}

let cooking=function(){
    setTimeout(()=>{
        console.log(‘Cooking’)
    },3000)
}

let eating=function(){
    setTimeout(()=>{
        console.log(‘Eating’)
    },500)
}

preparation();
frying();
cooking();
eating();

Output:

Eating
frying
preparation
Cooking

Wow Before cooking of food we are eating here..

Don’t worry, We have Solutions, Solutions 1: Call Back

/** 
 * Solution 1: Call Back
*/

let preparation=function(frying){
    setTimeout(()=>{
        console.log(‘preparation’);
        frying(cooking);
    },2000)    
}

let frying=function(cooking){
    setTimeout(()=>{
        console.log(‘frying’);
        cooking(eating);
    },1000)    
}

let cooking=function(eating){
    setTimeout(()=>{
        console.log(‘Cooking’);
        eating();
    },3000)
}

let eating=function(){
    setTimeout(()=>{
        console.log(‘Eating’)
    },500)
}

preparation(frying);

Output as expected

preparation
frying
Cooking
Eating

Don’t worry, We have Solutions, Solutions 2: Promise in Java Script

/** 
 * Solution2: Promise
*/

let preparation=new Promise( function(resolve, reject){
    setTimeout(()=>{        
        resolve(‘preparation=>’);      
    },1000)    
})

let frying=new Promise( function(resolve, reject){
    setTimeout(()=>{
        resolve(‘frying=>’);      
    },1000)    
})

let cooking=new Promise(function(resolve, reject){
    setTimeout(()=>{
        resolve(‘Cooking=>’);
    },3000)
})

let eating=new Promise( function(resolve, reject){
    setTimeout(()=>{
        resolve(‘Eating=>’);
    },500)
})

Promise.all([
   preparation,
   frying,
   cooking,
   eating 
]).then(a=>{
    console.log(…a);    
});

Output as expected

preparation
frying
Cooking
Eating

Don’t worry, We have Solutions, Solutions 3: Async Await

/** 
 * Solution3: Async Await
*/

let preparation=new Promise( function(resolve, reject){
    setTimeout(()=>{        
        resolve(‘preparation=>’);      
    },2000)    
})

let frying=new Promise( function(resolve, reject){
    setTimeout(()=>{
        resolve(‘frying=>’);      
    },1000)    
})

let cooking=new Promise(function(resolve, reject){
    setTimeout(()=>{
        resolve(‘Cooking=>’);
    },3000)
})

let eating=new Promise( function(resolve, reject){
    setTimeout(()=>{
        resolve(‘Eating=>’);
    },500)
})

let start=async function(){
 console.log(await preparation);
 console.log(await frying);
 console.log(await cooking);
 console.log(await eating);
}
start();

Output as expected

preparation
frying
Cooking
Eating

if enjoyed please like and share with other, might be helpful for them

Submit your review
1
2
3
4
5
Submit
     
Cancel

Create your own review

Community
Average rating:  
 0 reviews