Skip to main content

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.