How does await and async works in ES6 ?

In this article, we will try to understand how exactly async and await works in ES6. Let us first try to understand what exactly async and await are along with their usage and then further we will see some examples in which we would see how we may use async and await along with the normal functions.

Async and Await:

• Async and Await both are considered as special keywords which are provided by ES6 in order to perform some asynchronous data operations. Even synchronous operations could also be performed using these keywords.
• Async keyword is used along with the function declaration which specifies that this function is now able to accept all types of asynchronous events on itself.
• In other words, the async keyword is used along with functions (or methods) which enables them to receive all types of asynchronous data easily.
• Async keyword usage along with the functions always returns a promise at the end along with its state (pending or resolved or rejected).
• Await is used inside the async function which is though useful for the waiting purpose of the result.
• Await basically waits for the results which are particularly to be fetched from the source from which that async function is about to fetch the data.
• Await takes a little time to fetch the results from the source (like API) and thereafter along with the async function returns the result in the form of a promise.
• Await can also be used if Async is used along with the function declaration.

Working of Async and Await:

• Whenever a user declares a function with the async keyword in its declaration, it automatically implies a fact that this function or a method is ready to receive all of the asynchronous events on itself.
• After this, we generally use await keyword which then waits for the results and then fetches it successfully.
• After that, we store the fetched result in some random variable then display the result or use that result for several other purposes as per the requirement.
• A function that uses Async/Await keywords will eventually hold their results for some little amount of time as compared with other normal functions.
• Upon successful completion, the result may be used for further data operations within the code itself or may be displayed on the browser’s console successfully.

Now that we have understood details associated with the Async/Await usage in normal functions let us see some of the following examples which would eventually help us to understand things in a much better way.

Example 1: In this example, we would be using async and await inside a regular function (or method). Along with that, we would be displaying some other results. The output below will show us one thing that due to the usage of await keyword our result will be delayed a little bit as compared to the other results which we are displaying.

HTML

<script>
    let dataDisplay = async () => {
      let data = await "GeeksforGeeks";
      console.log(data);
    };
    console.log(1);
    dataDisplay();
    console.log("Hello");
</script>

Output:

1
Hello
GeeksforGeeks

Example 2: In this example, we would be using an open-source API which is a freely available API and can be accessed by all. We will fetch the results from that API in our browser’s console. This example clearly demonstrates how we will use the async/await in general while working with several real-time APIs. The output will be displayed in the following shown image.

HTML

<script>
    async function fetchMethod() {
      let response = await fetch(
        "https://reqres.in/api/products/3");
      let data = await response.json();
      console.log(data);
    }
    fetchMethod();
</script>

Output: