async/await in JavaScript: A Complete Guide

async/await in JavaScript: A Complete Guide

async/await is syntactic sugar over promises. It makes async code look synchronous and is the cleanest way to handle async operations.

async Functions

An async function always returns a promise. If you return a value, it is wrapped in a promise. If you throw, the promise rejects.

async function foo() {
  return 42; // returns Promise.resolve(42)
}
foo().then((v) => console.log(v)); // 42

await

await pauses the async function until a promise settles. It returns the fulfilled value or throws the rejection reason.

async function main() {
  const data = await fetch("/api");
  const json = await data.json();
  console.log(json);
}

Error Handling with try/catch

async function main() {
  try {
    const data = await fetch("/api");
    const json = await data.json();
    console.log(json);
  } catch (err) {
    console.error("Error:", err);
  }
}

async Arrow Functions

const foo = async () => {
  const data = await fetch("/api");
  return data.json();
};

Parallel with Promise.all

async function main() {
  const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
  console.log(user, posts);
}

The Takeaway

async functions always return promises. await pauses until a promise settles. Use try/catch for errors. Use Promise.all for parallel operations. async/await is the cleanest way to write async code in modern JavaScript.