Using Async/Await in Javascript: Advantages and Use Cases

Async/Await is a super helpful tool for writing asynchronous code in JavaScript. It was introduced in ECMAScript 2017 and since then it has become a go-to method for writing asynchronous code that is easy to read, understand, and keep up with. With Async/Await, developers can write asynchronous code that looks like and works like normal, synchronous code, making it much simpler to handle errors and wait for things to happen. 
﻿
In this article, we'll take a closer look at the benefits and practical applications of using Async/Await in JavaScript. And, we'll show you how it can be used in real-world examples to make your code clean, readable, and effective.
﻿
Advantages of using Async/Await in JavaScript﻿
Improved readability﻿
Improved readability is one of the key advantages of using Async/Await in JavaScript. Async/Await makes asynchronous code look and behave like synchronous code, which makes it much easier to read and understand.
﻿
Here's a real-world example that demonstrates the improved readability of Async/Await:
﻿
Consider the following code that fetches data from an API and logs the response:
﻿

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

While this code works, it can be difficult to understand what's happening just by looking at it. With Async/Await, the same code can be written in a way that is much easier to read:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

In this example, the fetchData function is declared as async, which allows it to use the await keyword. The await keyword is used to wait for the fetch and json functions to complete before logging the data. The use of a try/catch block makes it easy to handle any errors that may occur. The result is code that is much easier to understand and maintain, as it looks like normal, synchronous code.
﻿
Better error handling﻿
Async/Await provides a convenient way to handle errors in asynchronous code, making it easier to debug and maintain.
﻿
Consider the following code that fetches data from an API:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

With Async/Await, the same code can be written in a more concise and readable way:
﻿

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(response.statusText);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

In this example, the use of a try/catch block makes it easy to handle any errors that may occur. The result is code that is easier to debug and maintain, as it clearly separates error handling from the rest of the logic.
﻿
﻿
Simplified code﻿
Async/Await can greatly simplify complex, asynchronous code, making it easier to write and maintain.

fetch('https://api.example.com/data1')
  .then(response1 => response1.json())
  .then(data1 => {
    fetch('https://api.example.com/data2')
      .then(response2 => response2.json())
      .then(data2 => {
        console.log(data1, data2);
      });
  });

With Async/Await, the same code can be written in a more concise and readable way:

async function fetchData() {
  const response1 = await fetch('https://api.example.com/data1');
  const data1 = await response1.json();
  const response2 = await fetch('https://api.example.com/data2');
  const data2 = await response2.json();
  console.log(data1, data2);
}

In this example, the use of Async/Await makes it easy to fetch data from multiple APIs in a specific order, without the need for nested .then() callbacks. The result is code that is easier to read, write, and maintain.
﻿
Improved performance﻿
Improved performance is another advantage of using Async/Await in JavaScript. Async/Await allows for multiple asynchronous operations to be performed in parallel, which can result in improved performance.
﻿
Use cases for Async/Await in JavaScript﻿
Let's add some use cases :
﻿
API requests﻿
API requests are a common use case for Async/Await in JavaScript. When making API requests, it's often necessary to wait for the response from the API before continuing with the rest of the code.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

fetchData();

File I/O﻿
File I/O is another use case for Async/Await in JavaScript. When working with file I/O, it's often necessary to wait for the file to be read or written before continuing with the rest of the code.
﻿
Consider the following code that reads a file and logs its contents:

fs.readFile('example.txt', (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data.toString());
  }
});

With Async/Await, the same code can be written in a more readable way:

async function readFile() {
  try {
    const data = await fs.promises.readFile('example.txt');
    console.log(data.toString());
  } catch (err) {
    console.error(err);
  }
}

readFile();

Database operations﻿
Database operations are another common use case for Async/Await in JavaScript. When working with databases, it's often necessary to wait for the database operation to complete before continuing with the rest of the code.
﻿
Consider the following code that inserts data into a database:

db.query('INSERT INTO users (name, email) VALUES (?, ?)', ['John Doe', 'johndoe@example.com'], (err, results) => {
  if (err) {
    console.error(err);
  } else {
    console.log(results);
  }
});

With Async/Await, the same code can be written in a more readable way:

async function insertData() {
  try {
    const results = await db.query('INSERT INTO users (name, email) VALUES (?, ?)', ['John Doe', 'johndoe@example.com']);
    console.log(results);
  } catch (err) {
    console.error(err);
  }
}

insertData();

User interactions﻿
When working with user interactions, it's often necessary to wait for the user to complete an action before continuing with the rest of the code.
﻿
In conclusion, there are plenty of use cases for Async/Await in JavaScript, from making API requests and working with file I/O, to handling user interactions and working with databases. The improved readability, better error handling, and simplified code that Async/Await provides can make it an indispensable tool for any JavaScript developer. Whether you're working on a small, personal project or a large, complex application, Async/Await is definitely worth considering as a means to make your code easier to read, write, and maintain.

By Mahady Manana, Fullstack Javascript Developer

08 February 2023 at 15 h 48

"Skills are honed through the interplay of learning and teaching - one must learn in order to teach, and teach in order to truly learn”. As a passionate Javascript developer, I enjoy sharing my knowledge and skills with others, and regularly publish tutorials on my website and other platforms about the latest Javascript, Typescript, Node.js, React.js, Next.js and more to help others learn and stay up to date with the latest developments trends.