How to chain asynchronous functions in JavaScript ? - GeeksforGeeks

16 Feb, 2022
JavaScript is single-threaded asynchronous function is a time-consuming operations that can be performed 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, this sometimes creates a problem, when we have two async functions that depend on one another. 
Note: This article will be using ES2015+ features like async functions, arrow functions, etc. However, the same result is achievable using older ES features.
Example 1:To help us with that we have three async functions (black-box functions).
Javascript
<script>  async function getUserData() {      console.log('Fetching data');      }   async function cleanUserData(userData) {      console.log('Cleaning data');       }   async function saveToDataBase(userData) {      console.log('Saving to DB');      }  const userData = getUserData();  const cleanedData = cleanUserData(userData);  saveToDataBase(cleanedData);</script>
 
Output: These are asynchronous functions and their execution time is not always the same. So these functions can run in any possible order. The following is one possible output.
Cleaning data
Saving to DB
Fetching data
There are two ways to run these functions to enforce an order of function executions.
1.Using Promise’s  .then()
Javascript
<script>async function getUserData() {      console.log('Fetching data');      }   async function cleanUserData(userData) {      console.log('Cleaning 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>
Output:
Fetching data
Cleaning data
Saving to DB
All work done
This is good and does the work, but sometimes it can create a callback hell, which will possibly ruin your mood when you see your code (just kidding).
2.Using async / await:
There is a cleaner way to do the same thing, waiting for a function to complete its execution using the await keyword. The await() works only inside async() function. So, we need to wrap these inside a wrapper function.
Javascript
<script>  async function getUserData() {      console.log('Fetching data');      }   async function cleanUserData(userData) {      console.log('Cleaning data');       }   async function saveToDataBase(userData) {      console.log('Saving to DB');      }  async function cleanAndSaveUserData() {    const userData = await getUserData();    const cleanedData = await cleanUserData(userData);    await saveToDB(cleanedData);         console.log('All work done');  }   cleanAndSaveUserData(); // does all the work </script>
Output:
Fetching data
Cleaning data
Saving to DB
All work done
Note: This article does not cover error handling in chained async() functions for simplicity.
sagar0719kumar
JavaScript-Methods
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to filter object array based on attributes?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript