JavaScript Async Await Handle Promises Easily: Tutorial, Examples, FAQs & Interview Tips

What is Async / Await?

Async/await is syntactic sugar built on top of Promises, introduced in ES2017. It lets you write asynchronous code that looks and reads like synchronous code "” no more chaining .then() calls. Under the hood, an async function always returns a Promise, and await pauses execution inside that function until the awaited Promise settles.

async before a function makes it return a Promise automatically.
await pauses the async function until the Promise resolves or rejects.
await can only be used inside an async function.
Error handling uses standard try/catch blocks.

Basic Async / Await

// async function always returns a Promise
async function greet() {
  return 'Hello!';
}
greet().then(msg => console.log(msg)); // Hello!

// await pauses until the Promise resolves
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const user     = await response.json();
  console.log(user.name);
}

fetchUser(1);

Async / Await vs Promise Chains

Both approaches do the same thing "” async/await is simply easier to read, especially when you have multiple sequential async steps.

Comparison

// ── Promise chain ──
function loadData() {
  return fetch('/api/user/1')
    .then(r => r.json())
    .then(user => fetch(`/api/posts?userId=${user.id}`))
    .then(r => r.json())
    .then(posts => console.log(posts));
}

// ── Async / Await (same logic, cleaner) ──
async function loadData() {
  const userRes  = await fetch('/api/user/1');
  const user     = await userRes.json();

  const postsRes = await fetch(`/api/posts?userId=${user.id}`);
  const posts    = await postsRes.json();

  console.log(posts);
}

Error Handling with try / catch

Use try/catch to handle errors in async functions. Any rejected promise inside the try block will throw and be caught by catch. You can also use finally for cleanup.

try / catch / finally

async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);

    if (!res.ok) throw new Error(`HTTP error: ${res.status}`);

    const user = await res.json();
    console.log('User:', user.name);
    return user;

  } catch (error) {
    console.error('Failed to load user:', error.message);

  } finally {
    console.log('Request finished'); // always runs
  }
}

loadUser(42);

Running Promises in Parallel with await

Using await sequentially means each operation waits for the previous one to finish. When operations are independent, use Promise.all() with await to run them in parallel and save time.

Sequential vs Parallel

// Sequential "” total time = time1 + time2
async function sequential() {
  const users  = await fetch('/api/users').then(r => r.json());
  const posts  = await fetch('/api/posts').then(r => r.json());
  return { users, posts };
}

// Parallel "” total time = max(time1, time2)
async function parallel() {
  const [users, posts] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
  ]);
  return { users, posts };
}

Async in Loops

Be careful when using await inside loops. Using await in a for loop runs iterations sequentially. To run all iterations in parallel, collect the promises first and use Promise.all().

Async in Loops

const ids = [1, 2, 3, 4, 5];

// Sequential "” each waits for the previous
async function loadSequential() {
  for (const id of ids) {
    const user = await fetchUser(id); // waits each time
    console.log(user.name);
  }
}

// Parallel "” all fire at once
async function loadParallel() {
  const promises = ids.map(id => fetchUser(id));
  const users    = await Promise.all(promises);
  users.forEach(u => console.log(u.name));
}

// Note: forEach does NOT work with await "” use for...of or map
// ids.forEach(async id => { ... }); // won't wait correctly

Key Takeaways

async functions always return a Promise "” even if you return a plain value, it gets wrapped automatically.
await pauses the async function until the Promise settles. It does NOT block the main thread.
Use try/catch for error handling in async functions "” it catches both synchronous throws and rejected promises.
Sequential await (one after another) is fine when each step depends on the previous result.
Use Promise.all() with await when operations are independent "” it runs them in parallel and is much faster.
Never use await inside forEach "” use for...of or map + Promise.all() instead.

JavaScript Async Await Handle Promises Easily: Tutorial, Examples, FAQs & Interview Tips

What is Async / Await?

Async / Await vs Promise Chains

Error Handling with try / catch

Running Promises in Parallel with await

Async in Loops

Level Up Your Javascript Skills

Popular Tutorials

Ready to Level Up Your Skills?