Async await in JavaScript

Async/await is a relatively new addition to JavaScript that allows developers to write asynchronous code that looks and behaves like synchronous code.

Async/await is built on top of Promises and provides a way to consume Promises in a more readable and intuitive manner.

Here's an example of how you can use async/await to consume a Promise:

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 means that it returns a Promise.
• The await keyword is used to wait for the resolution of the fetch Promise and then the json method of the response Promise.
• If any of these Promises are rejected, the code inside the catch block is executed.

Importance of Async/Await

Here are some key benefits of using async/await:

Simplifies error handling

Without async/await, error handling in asynchronous code can be challenging and lead to deeply nested callbacks.

Here's an example of fetching data using callbacks:

fetchData(function (error, data) {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

With async/await, the same code can be written like this:

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);
  }
}

Using try/catch blocks makes error handling much more readable and less error-prone.

if you want to learn more about error handling in JavaScript, check out our JavaScript Error Handling Blog.

Makes code more readable

Consider this example of asynchronous code using Promises:

fetchData()
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

Using async/await, the same code can be written like this:

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);
  }
}

Async/await makes the code more readable and easier to understand.

Reduces code complexity

Consider this example of asynchronous code using Promise chaining:

fetchData()
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    const processedData = processData(data);
    return sendData(processedData);
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

Using async/await, the same code can be written like this:

async function processData() {
  try {
    const response = await fetchData();
    const data = await response.json();
    const processedData = processData(data);
    const sendResponse = await sendData(processedData);
    console.log(sendResponse);
  } catch (error) {
    console.error(error);
  }
}

Async/await makes it possible to write complex asynchronous code with less complexity and fewer lines of code than Promise chaining.