How to create an Asynchronous function in Javascript? - GeeksforGeeks

17 Dec, 2021
JavaScript is a 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: 
HTML
<!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>
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, 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.  
HTML
<!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>
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).  
HTML
<!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 Received</p>"            msg.innerHTML += "<p>f2 is ending</p>";        }           f2();       </script></body></html>
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. 
HTML
<!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>
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: 
HTML
<!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>
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 to the following link for that: 
https://www.geeksforgeeks.org/javascript-callbacks/
https://www.geeksforgeeks.org/javascript-promises/
 
anikakapoor
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?