async/await - Modern Async Syntax
async/await is syntactic sugar over Promises - it makes async code look and behave like synchronous code. It's the modern standard for handling async operations in JavaScript. No more .then() chains!
async/await
- async function - Declares a function that returns a Promise automatically
- await - Pauses execution until the Promise resolves. Only works inside async functions
- Looks synchronous - const data = await fetchData(); reads like sync code but is async
- Error handling - Use try/catch instead of .catch()
- Top-level await - Available in ES modules (type='module') without wrapping in async function
- Always returns a Promise - async function always returns a promise, even if you return a plain value
async/await Code
// Promise version
function fetchUser(id) {
return new Promise(resolve =>
setTimeout(() => resolve({ id, name: "Alice", age: 25 }), 1000)
);
}
function fetchOrders(userId) {
return new Promise(resolve =>
setTimeout(() => resolve([{ id: 101, item: "Laptop" }]), 800)
);
}
// ✅ async/await - clean and readable!
async function getUserData() {
console.log("Fetching user...");
const user = await fetchUser(1); // waits for promise
console.log("User:", user.name);
console.log("Fetching orders...");
const orders = await fetchOrders(user.id); // waits for promise
console.log("Orders:", orders);
return { user, orders };
}
getUserData().then(data => console.log("Complete:", data));
// Parallel with async/await
async function fetchParallel() {
// ✅ Start both at once, await together
const [user, orders] = await Promise.all([
fetchUser(1),
fetchOrders(1)
]);
console.log("Parallel:", user.name, orders.length, "orders");
}
fetchParallel();
// Compare the three styles:
// Callbacks: fetchUser(id, (user) => { fetchOrders(user.id, (orders) => { ... }) })
// Promises: fetchUser(id).then(user => fetchOrders(user.id)).then(orders => ...)
// async/await: const user = await fetchUser(id); const orders = await fetchOrders(user.id);Tip
Tip
async/await is just syntactic sugar over Promises. Every async function returns a Promise. await pauses only the async function, not the whole program. Other code continues running while waiting.
Reads like sync code. Wrap in try/catch.
Common Mistake
Warning
Using await inside a loop when requests are independent. for (const url of urls) { await fetch(url); } runs sequentially. Use Promise.all(urls.map(url => fetch(url))) to run in parallel - much faster.
Practice Task
Note
async/await: (1) Convert a .then() chain to async/await. (2) Fetch user data from JSONPlaceholder API using async/await. (3) Handle errors with try/catch. (4) Use Promise.all with await for parallel requests.
Quick Quiz
Key Takeaways
- async/await is syntactic sugar over Promises - it makes async code look and behave like synchronous code.
- async function - Declares a function that returns a Promise automatically
- await - Pauses execution until the Promise resolves. Only works inside async functions
- Looks synchronous - const data = await fetchData(); reads like sync code but is async