Async/Await in JavaScript: Writing Cleaner Asynchronous Code

“If you write asynchronous code using promises, this blog is for you. In this blog, we explore Async/Await in JavaScript.”

What is Async/Await:

Async/Await keywords are used to write asynchronous code that looks like synchronous code. It makes your code more readable and clean. They are just syntactic sugar over JavaScript promises.

Async keyword:

We can use the async keyword with any function. This keyword ensures that the function always returns a promise. If a function returns a non-promise value, JavaScript automatically wraps it in a resolved promise.

Await keyword:

We use the await keyword with code that takes time to resolve. The await keyword pauses the execution of the function until the promise is either resolved or rejected. While the function is paused, the JavaScript thread is free to perform other tasks.

How Async/Await work together: async creates a promise based function. await wait for the promise to resolve inside that function.

Code Example of Async/Await

function fetchData() {  return new Promise((resolve, reject) => {  setTimeout(() => {  resolve("Data fetched successfully!");  }, 2000);  }); }

function fetchData() {  return new Promise((resolve, reject) => {  setTimeout(() => {  resolve("Data fetched successfully!");  }, 2000);  }); }

// async function async function getData() { console.log("Fetching data...");

const result = await fetchData(); // waits here

console.log(result); }

getData();`

Enter fullscreen mode

Exit fullscreen mode

output :  Fetching data... (Data comes after 2 seconds) Data fetched successfully!

output :  Fetching data... (Data comes after 2 seconds) Data fetched successfully!

Enter fullscreen mode

Exit fullscreen mode

Same code Without Async/Await(Promises)

function fetchData() {  return new Promise((resolve, reject) => {  setTimeout(() => {  resolve("Data fetched successfully!");  }, 2000);  }); }

function fetchData() {  return new Promise((resolve, reject) => {  setTimeout(() => {  resolve("Data fetched successfully!");  }, 2000);  }); }

function getData() { console.log("Fetching data...");

fetchData().then((result) => { console.log(result); }); }

getData();`

Enter fullscreen mode

Exit fullscreen mode

.then() callback style. await easy to read and understand.

Error handling with async code :

Error handling in asynchronous code ensures that failures (like database errors) are handled without crashing the application.

Try-Catch is the standard way to handle errors in modern JavaScript. You use the await keyword inside the try block. If any error occurs, the catch block executes and handles the error.

async function getData() {  try {  const result = await fetchData(); // if promise rejects, control goes to catch  console.log(result);  } catch (error) {  console.log("Error:", error);  } }

async function getData() {  try {  const result = await fetchData(); // if promise rejects, control goes to catch  console.log(result);  } catch (error) {  console.log("Error:", error);  } }

Enter fullscreen mode

Exit fullscreen mode

Conclusion :

In this blog, we learned how to write cleaner and more readable asynchronous code using the Async/Await keywords. We also explored error handling using try-catch inside an asynchronous function.