How does async/await work in JavaScript?
async functions always return a Promise; await pauses execution until a Promise resolves, letting you write async code that reads like synchronous code.
JavaScriptAsync
Overview
`async/await` is syntactic sugar over Promises. It makes asynchronous code look and behave more like synchronous code, which is much easier to read and debug than chained `.then()` calls.
Key Points
- •A function marked `async` always returns a Promise, even if it returns a plain value.
- •`await` can only be used inside an `async` function (or at the top level of a module).
- •`await` pauses the function until the Promise resolves, then returns the resolved value.
- •Errors are caught with `try/catch`, just like synchronous code.
- •To run multiple async operations in parallel, use `await Promise.all([...])` instead of awaiting them one by one.
Examples
Basic fetch with async/await
javascriptasync function getUser(id) {
const response = await fetch(`/api/users/${id}`);
const user = await response.json();
return user;
}Error handling with try/catch
javascriptasync function loadPost(id) {
try {
const res = await fetch(`/api/posts/${id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (error) {
console.error('Failed to load post:', error);
return null;
}
}Parallel execution with Promise.all
javascript// Sequential slow: waits for each one before starting the next
const user = await getUser(1);
const profile = await getProfile(1);
// Parallel fast: both start at the same time
const [user, profile] = await Promise.all([getUser(1), getProfile(1)]);Use Promise.all whenever the calls are independent of each other.
Pro Tip
An async function doesn't make code faster it just makes it easier to write. The actual speed comes from running independent operations in parallel with `Promise.all`. Sequential `await` calls are still sequential.