Understanding async and await in javascript

Avinash Kr — Sun, 13 Jun 2021 19:26:05 +0000

Async await is another way of handling promises in JavaScript.
One of the main advantage of using it is clean code.

In this article we will understand with examples and use cases.

In general, we use .then().catch() to handle promises:

const url ="https://jsonplaceholder.typicode.com/posts/1";

fetch(url)
  .then(response=>response.json())
  .then(data=>console.log(data))
  .catch(error=>console.log(error));

Let's handle it using async await

We can write using function statement or function expression. Both will be valid, only difference is use of anonymous function in function expression.

//function statement
    async function getPosts(){
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    }

    //function expression
    const getPosts = async function(){
        const response = await fetch(url);
        const data = await response.json();
         console.log(data);
    }

Please keep in mind that we are not handling with error in the above code, the value of response will only be return when operation is success.

HOW CAN WE HANDLE ERROR IN ASYNC AWAIT ??

To handle error in async await, we can use 'try and catch'

Look at the code below for the same:

 async function getPosts(){
        try{
            const response = await fetch(url);
            const data = await response.json();
            console.log(data);
        } catch{
            console.log('something went wrong in getting post')
        }
    }

HOW TO HANDLE MULTIPLE PROMISES USING ASYNC AWAIT ??

suppose we have to fetch user, post and comment in async await.

Look at the code below and guess how will it work

const user = 'https://jsonplaceholder.typicode.com/users/1';
const post = 'https://jsonplaceholder.typicode.com/posts/1';
const comment = 'https://jsonplaceholder.typicode.com/comments/1';

     const multiFetch = async()=>{
           const userRes= await fetch(user);
           const userData = await userRes.json();

           const postRes= await fetch(post);
            const postData = await postRes.json();

           const commentRes = await fetch(comment);
           const commentData = await commentRes.json();
        }

In the above line of code javascript will wait on every line to complete its work, then move to next line. In simple words it will first fetch user, once its is completed, js will fetch post, then comment. Javascript will work synchronously.

CAN WE MAKE MULTIPLE FETCH REQUESTS AT THE SAME TIME??

We can fetch multiple at the same time, every request will be made independently or it will not block other request.

const multiFetch = async()=>{
  try{
     const allRes = await Promise.all([fetch(user),fetch(post)],fetch(comment)]);
     const response =  allRes.map(res=>res.json());
     const finalData = await Promise.all(response);
     console.log(data);
    } catch{
        console.log("promise not fulfilled")
    }
}

In above code, every request will be made in parallel, and value will be returned once resolved, in case of error code in catch will run.

I hope it might helped you to get idea of how to use async await in javascript.

Change behaviour of button on different pages.

Avinash Kr — Sun, 21 Mar 2021 14:02:43 +0000

I am creating a React app like blogging page. In the navbar I have included three buttons:
1.Write
2.Your Articles - to view articles posted by the user
3:Logout

Now I wanted to change behavior of Write button to submit type when I am writing articles and change text to Publish.
Here is expected output:

I did google and read some articles but was not getting proper solution.

To solve this problem:

I passed submitHandler method as prop from parent component to Navbar
created a newstate using useState hook in parent component and passed as prop. I defined newstate like this:

const [navitems, setNavitems] = useState({
item1:{text:"Write",type:'submit'}, item2:{text:'Your Article',type:''}, item3:{text:'Logout',type:''}
});

passed newstate as prop to navbar.
In total there are two props passed to navbar.(submitHandler, navitems)

setter method is passed as prop to component, which will render when we are writing article, call it as "createComponent"

In the createComponent I called setter method "setNavitems" in useEffect and changed the button text=Publish and type=submit;

Since I have written article in createComponent I have to submit it from the same page to send data to server but as per the design wireframe I have to remove submit button and and submit through publish button which is in another component(Navbar).

To solve this I thought to render a different navbar looking very similar to previous and hide original. I did not liked the solution as it was using more resources for small functionality, I was rendering a complete new DOM node.

Then I used another way, passed the same submitHandler as prop to createComponent and called it onSubmit event, parent of Navbar and createComponet are same so I lifted the state and passed a new state as props to the createComponent
here it is:

article is not handlingchange on createComponent and it is is stored in parent component.

Finally I was able to submit the article from the parent component by calling calling dispatch in submitHandler function

DEV Community: Avinash Kr

Understanding async and await in javascript

HOW CAN WE HANDLE ERROR IN ASYNC AWAIT ??

HOW TO HANDLE MULTIPLE PROMISES USING ASYNC AWAIT ??

CAN WE MAKE MULTIPLE FETCH REQUESTS AT THE SAME TIME??

Change behaviour of button on different pages.