Understanding Async/Await in JavaScript
In JavaScript, asynchronous programming allows you to perform long network requests or operations without blocking the main thread. async/await
was introduced in ES2017 (ES8) and is built on top of Promises to make asynchronous code easier to read and write.
What is async
?
An async
function is a function that always returns a Promise. Inside it, you can use the await
keyword to pause execution until a Promise resolves.
What is await
?
The await
keyword can only be used inside an async
function. It waits for the Promise to resolve and returns the result. If the Promise is rejected, it throws the error.
Basic Example of Async/Await
Let’s simulate a network request using setTimeout
wrapped in a Promise, then use async/await
to call it.
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data received!");
}, 2000);
});
}
async function displayData() {
console.log("Fetching...");
const result = await fetchData();
console.log(result);
}
displayData();
Output:
Fetching... Data received!
Why use async/await over Promises?
While Promises work fine, they can lead to nested .then()
chains, which are harder to read and maintain. async/await
flattens this structure, making your code easier to follow.
Chaining Multiple Await Calls
You can chain multiple await calls sequentially just like synchronous code:
function delay(message, ms) {
return new Promise((resolve) => {
setTimeout(() => resolve(message), ms);
});
}
async function chainMessages() {
const msg1 = await delay("Step 1 complete", 1000);
console.log(msg1);
const msg2 = await delay("Step 2 complete", 1000);
console.log(msg2);
const msg3 = await delay("Step 3 complete", 1000);
console.log(msg3);
}
chainMessages();
Output:
Step 1 complete Step 2 complete Step 3 complete
What happens if a Promise fails?
If a Promise rejects, the await
line throws an error. You must handle it using try...catch
blocks inside async functions.
Using try/catch with Async/Await
function fetchUser() {
return new Promise((_, reject) => {
setTimeout(() => reject("User not found"), 1000);
});
}
async function getUserData() {
try {
const user = await fetchUser();
console.log(user);
} catch (error) {
console.error("Error:", error);
}
}
getUserData();
Output:
Error: User not found
Q: Can we use await outside of async function?
A: No, await
can only be used inside an async
function. Using it outside will result in a syntax error (except in top-level code in modern environments like recent versions of Node.js or browsers).
Summary
async
functions return Promises.await
pauses the execution of the function until the Promise resolves.- Use
try/catch
to handle errors gracefully. - Async/await makes asynchronous code look and behave more like synchronous code.