How to create an Asynchronous function in Javascript?

JavaScript is single-threaded and synchronous language. The code is executed in order one at a time. But Javascript may appear to be asynchronous in some situations.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="message"></div>
    <script>
        var msg = document.getElementById("message");
  
        function f1() {
            setTimeout(function () {
               msg.innerHTML += "<p>f1 is starting</p>";
               msg.innerHTML += "<p>f1 is ending</p>";
            }, 100);
        }
        function f2() {
            msg.innerHTML += "<p>f2 is starting</p>";
            f1();
            msg.innerHTML += "<p>f2 is ending</p>";
        }
  
        f2();
  
    </script>
</body>
</html>

chevron_right


Output

f2 is starting
f2 is ending
f1 is starting
f1 is ending

Now, we can see after executing setTimeout(f1, 100), our program is not waiting for the timer to finish it but it is jumping on the next statement immediately. This happens because if we want to execute some event, the JavaScript puts the event in the event queue and continues the normal execution of the program. The engine periodically looks in the event queue to see if some event needs to be called or not.

But we may want our program to wait until some particular event or work is completed before processing further commands.



An asynchronous function is implemented using async, await and promises.

  • async: The “async” keyword defines an asynchronous function.
    Syntax
    async function FunctionName(){
        ...
    }
  • await: The “async” function contains “await” that pauses the execution of “async” function. “await” is only valid inside the “async” function.
  • Promise: A Promise is a proxy value. It tells us about the success/failure of the asynchronous event. A Promise must contain resolve() or reject() call or else the consumer of the Promise will never know whether Promise is fulfilled or not. If that happened then the program will keep waiting for await and that code block will never be executed further. There is a lot more to Promise but we can make Asynchronous function without any deep knowledge of it.

Example: Let’s redo the above example using the Asynchronous function.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="message"></div>
    <script>
        var msg = document.getElementById("message");
  
        function f1() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                msg.innerHTML += "<p>f1 is starting</p>";
                    msg.innerHTML += "<p>f1 is ending</p>";
                    resolve();
                }, 100);
            })
        }
  
        async function f2() {
            msg.innerHTML += "<p>f2 is starting</p>";
              
            // Engine waits for f1() to finish it's 
            // execution before executing the next line
            await f1(); 
            msg.innerHTML += "<p>f2 is ending</p>";
        }
  
        f2();
  
    </script>
</body>
</html>                    

chevron_right


Output:

f2 is starting
f1 is starting
f1 is ending
f2 is ending

In the above example, the program waits for f1() to complete its execution before proceeding further. The “await” stops the execution of that code segment until a Promise is received. The resolve() is used to resolve the Promise. It means the Promise is fulfilled. Similar to resolve, we can also use reject() to know the Promise is rejected. The reject() function is mainly used for debugging and error purpose, we don’t need to dig deep into it for now.

Example: If we want the Promise to return some value, we can pass it in resolve(variable).

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="message"></div>
    <script>
        var msg = document.getElementById("message");
  
        function f1() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                   msg.innerHTML += "<p>f1 is starting</p>";
                    msg.innerHTML += "<p>f1 is ending</p>";
                    resolve(1);
                }, 100);
            })
        }
  
        async function f2() {
            msg.innerHTML += "<p>f2 is starting</p>";
            var p = await f1();
            if (p == 1) msg.innerHTML += "<p>Promise Recieved</p>"
            msg.innerHTML += "<p>f2 is ending</p>";
        }
  
        f2();
  
    </script>
</body>
</html>

chevron_right


Output:

f2 is starting
f1 is starting
f1 is ending
Promise Received
f2 is ending

Waiting for Multiple Promises: What if we had to wait for multiple functions? We have two ways of doing it.

Example: We can write multiple await statements sequentially.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="message"></div>
    <script>
        var msg = document.getElementById("message");
  
        function f1() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                   msg.innerHTML += "<p>f1 is starting</p>";
                   msg.innerHTML += "<p>f1 is ending</p>";
                   resolve();
                }, 1000);
            })
        }
  
        function f3() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                   msg.innerHTML += "<p>f3 is starting</p>";
                   msg.innerHTML += "<p>f3 is ending</p>";
                   resolve();
                }, 1000);
            })
        }
  
        async function f2() {
            msg.innerHTML += "<p>f2 is starting</p>";
            await f1();
            await f3();
            msg.innerHTML += "<p>f2 is ending</p>";
        }
  
        f2();
  
    </script>
</body>
</html>

chevron_right


Output

  • f2 is starting
    f1 is starting
    f1 is ending
    f3 is starting
    f3 is ending
    f2 is ending
  • In the above example, first we get
    f2 is starting 
  • Then after 1 second we get
    f1 is starting
    f1 is ending
  • Then after another 1 second, we get
    f3 is starting
    f3 is ending
    f2 is ending

Example: The second way to wait for multiple Promises is to run the Promises in parallel using Promise.all(iterable object).
Syntax:

await Promise.all(iterable object);

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="message"></div>
    <script>
        var msg = document.getElementById("message");
  
        function f1() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                   msg.innerHTML += "<p>f1 is starting</p>";
                   msg.innerHTML += "<p>f1 is ending</p>";
                   resolve();
                }, 1000);
            })
        }
  
        function f3() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                   msg.innerHTML += "<p>f3 is starting</p>";
                   msg.innerHTML += "<p>f3 is ending</p>";
                   resolve();
                }, 1000);
            })
        }
  
        async function f2() {
            msg.innerHTML += "<p>f2 is starting</p>";
            await Promise.all([f1(), f3()]);
            msg.innerHTML += "<p>f2 is ending</p>";
        }
  
        f2();
  
    </script>
</body>
</html>

chevron_right


Output

  • f2 is starting
    f1 is starting
    f1 is ending
    f3 is starting
    f3 is ending
    f2 is ending
  • The output is the same as the previous code, but in this case, the program will output
    f2 is starting
  • Then wait for 1second and output
    f1 is starting
    f1 is ending
    f3 is starting
    f3 is ending
    f2 is ending

Since f1() and f3() are running in parallel we do not need to wait another 1 second before executing f3(). In simple words, the timer of setTimeout() in f1() and f3() starts at the same time.

Note: We can also implement asynchronous behavior using only Promises without async/await and callbacks, refer the following link for that:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.