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 asasync
, which means that it returns a Promise. - The
await
keyword is used to wait for the resolution of the fetch Promise and then thejson
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.