Async JS - Callbacks, Promises, Async await
Tags: async, javascript, webdev, tutorial
Published: 2022-10-01 02:15:30

**Disclaimer: This post is based on the video https://www.youtube.com/watch?v=PoRJizFvM7s&t=23s and Joys icecream post https://dev.to/joyshaheb/learn-callbacks-promises-async-await-by-making-ice-cream-4n76**

Look at the below code snippet and answer the questions
 
```javascript
const posts =[
{title:'post one', body:'This post one'},
{title:'post two',body:'This is post two'}
]
function getPosts(){
  setTimeout(()=>{
  let output ='';
  posts.forEach((post,index)=>{
     output +=`<li> ${post.title},</li>';
});
  document.body.innerHTML = output;},1000);
}
function createPost (post ){
  setTimeout(()=>{
   posts.push(post);
   
  },2000);
}
getPosts()
createPost({title:'Post Three', body:'This is post three'} );
```

**Questions**

**1. What would happen if we run the above code? Explain?**

We would only see post one and post two printed, we cant get the post three printed as create Post has a delay of 2 seconds and by the time CreatePost is run (in 2 sec) the getPosts function had already completed its execution

**2. How can we fix the above, and print three posts by amending the above code snippet?**

We can do this by amending the code snippet to call the getposts function inside createPosts , to do this we have to add getPosts function inside createPost, and add a callback as below

```javascript
function createPost(post,callback) {
 setTimeout(()=>{
  posts.push(post);
 callback();
},2000);
}
 //and then

createPost({title:'Post three', body: 'This is post three'}, getPosts);
```

**3. Using the amended code in (2) above, perform the same with promises instead of callbacks.**

```javascript
function createPost(post) {
  return new Promise((resolve,reject) =>{
    setTimeout(()=> {
      posts.push(post);
      
      const error = false;
      
      if(!error){
       resolve();
      } else {
       reject('Error: something went wrong');
    }
},2000);
});
}

createPost({title:'Post three', body:'This is post three'}).then(getPosts).catch(err=> console.log(err));
```

**4. Whats the use of promise.all?**

If we have lot of different promises, instead of writing a lot of `.then` promises we can do promise.all , as below 

```javascript
const promise1 = Promise.resolve('Hellow world')
const promise2 = 10;
const promise3 = new Promise((resolve, reject)=>setTimeout(resolve,2000,'Goodbye'))
const promise4=fetch('https://jsonplaceholder.typicode.com/users').then(res=>res.json());


Promise.all([promise1,promise2,promise3,promise4]).then(
(value)=>console.log(values)
);
```

      
**5. What is the use of 'async , await' in the context of promises, use async, await to print three posts, 2 from the posts abject , and one manually added, with createPost and getPosts functions.**


**Example 1**

```javascript
async function init(){

  await createPost({title:'Post three', body:'This is post three'});
  getPosts()
}

init()
```
so you would see all three posts in the output of the above code, because with the await keyword the createPost would finalize executing before it goes to getPosts() 

**Example 2 with fetch**

```javascript
async function fetchUsers(){
  const res = await fetch ('https://jsonplaceholder.typicode.com/users');

const data = await res.json()

console.log(data);

}

fetchUsers();
```
**6. Answer the questions based on the program written using async await**

```javascript
function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")

  await toppings_choice()

  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();
console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

```
**a. What would be the output and why**

The out put of this would look like
```javascript
output
A
B
C
doing the dishes
cleaning the tables
taking orders
which topping would you love
D
E
```
This is because execution of kitchen function was paused at toppings_choice() and other console.logs were executed while toppings_choice() was executing in the background and then the rest of the lines in the kitchen function .

**b. Whats the key difference between getPosts example and this example?**

In the getPosts example the async function we used was init(), it had one promise inside with await keyword, the execution paused at 'CreatePosts' function until it finished executing, however in this example we have multiple functions , which are console.logs, the await function is paused inside the kitchen function while the console.logs outside of the kitchen function are executed.