
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to chain asynchronous functions in JavaScript?
JavaScriptis a single-threaded synchronous function that performs operations. It is a timeconsuming operation that blocks other operations of the thread.
We can use the asynchronous programming provided by JavaScript that performs functions without blocking other operations of the thread. This can be done by asynchronous code like promises or async functions (which basically are cleaner promises).
Asynchronous functions are cool but the time of their execution is not certain which might create a problem. Also, it is not easier to track async functions for any potential errors.
In this article, we will be exploring the chaining of asynchronous functions using ES2015+ features like async functions, arrow functions, etc.
Example 1
In the below example we have 3 async functions.
# index.html
<html> <head> <title>Chaining Async functions</title> <script type = "text/javascript"> <!-- function showTutorial(name) { document.myform.stage.value = name } //--> </script> </head> <body> <h1 style="color: green;">Welcome To Tutorials Point</h1> <script type="text/javascript"> async function getUserData() { console.log('Data fetched successfully.'); } async function cleanUserData(userData) { console.log('Cleaning the data'); } async function saveToDataBase(userData) { console.log('Data saved successfully to DB.'); } const userData = getUserData(); const cleanedData = cleanUserData(userData); saveToDataBase(cleanedData); </script> </body> </html>
Output
The above program will produce the result in the console similar to the below screenshot −
Example 2: Using Promise
In the below example, we are using Promise with then() to call async functions in the chain.
# index.html
<html> <head> <title>Chaining Async functions</title> <script type = "text/javascript"> <!-- function showTutorial(name) { document.myform.stage.value = name } //--> </script> </head> <body> <h1 style="color: green;"> Welcome To Tutorials Point </h1> <script type="text/javascript"> async function getUserData() { console.log('Data fetched successfully'); } async function cleanUserData(userData) { console.log('Cleaning the data'); } async function saveToDataBase(userData) { console.log('Saving to DB'); } getUserData() .then((userData) => cleanUserData(userData)) .then((cleanedData) => saveToDataBase(cleanedData)) .then(() => console.log('All work done')) </script> </body> </html>
Output
The above program will produce the result in the console similar to the below screenshot −
Example 3:Using async | await
In the below example, we are going to use the async and await function which is a better and cleaner way to perform chaining. The await() function works only inside async() function. So we need to wrap it inside a wrapper function.
# index.html
<html> <head> <title>Chaining Async functions</title> <script type = "text/javascript"> <!-- function showTutorial(name) { document.myform.stage.value = name } //--> </script> </head> <body> <h1 style="color: green;"> Welcome To Tutorials Point </h1> <script type="text/javascript"> async function getUserData() { console.log('Data Fetched successfully'); } async function cleanUserData(userData) { console.log('Cleaning the data'); } async function saveToDataBase(userData) { console.log('Saving to DB'); } async function cleanAndSaveUserData() { let userData = await getUserData(); let cleanedData = await cleanUserData(userData); await saveToDataBase(cleanedData); console.log('All work done'); } cleanAndSaveUserData(); // does all the work </script> </body> </html>
Output
The above program will produce the result in the console similar to the below screenshot −
- Related Articles
- Explain asynchronous functions in JavaScript with an example
- Asynchronous Functions and the Node Event Loop in Javascript
- How to implement asynchronous loop in JavaScript?
- How does asynchronous code work in JavaScript?
- What are Hash Functions in block chain?
- How to return the response from an asynchronous call in Javascript?
- How to call functions in JavaScript?
- Explain Asynchronous vs Deferred JavaScript
- How to define nested functions in JavaScript?
- How to create asynchronous function in TypeScript?
- Calling asynchronous code from index.html page in JavaScript?
- How to use named arguments in JavaScript functions?
- How to pass arguments to anonymous functions in JavaScript?
- How to define getter and setter functions in JavaScript?
- How to call multiple JavaScript functions in onclick event?
