Async/Await is syntactic sugar over Promises. It makes asynchronous code look synchronous, which is easier for human brains to follow.
The Pattern
Notice we wrap everything in try/catch. This is mandatory in professional code. Without it, if the request fails, your app might crash silently.
javascript
// Mock API Call
const fetchUser = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
// Simulate 50% failure rate
Math.random() > 0.5
? resolve({ id: 1, name: "Alice" })
: reject(new Error("Network Error"));
}, 1000);
});
};
async function loadProfile() {
console.log("Loading...");
try {
// Code pauses here until promise settles
const user = await fetchUser();
console.log("User loaded:", user.name);
} catch (error) {
// If promise rejects, we jump here
console.error("Failed:", error.message);
} finally {
console.log("Loading spinner hidden.");
}
}
loadProfile();Common Mistake: Sequential Waterfalls
Don't await things one by one if they don't depend on each other.
Bad: await getUser(); await getPosts(); (Waits twice).
Good: await Promise.all([getUser(), getPosts()]); (Runs together).