JavaScript Notes

JavaScript Async Await - Complete Guide with Examples & Error Handling

Master JavaScript async/await syntax, error handling with try/catch, sequential vs parallel execution, and real-world API patterns. Complete guide with diagrams.

Introduction

async/await is syntactic sugar over Promises — it doesn't introduce new capabilities, but makes asynchronous code look and read like clean, synchronous code. Introduced in ES2017 (ES8), it has become the preferred way to write asynchronous JavaScript.

Before async/await, even simple sequential async operations required deeply nested .then() chains. Now we can write them as naturally as step-by-step instructions.

Why learn async/await?

Makes async code readable and maintainable
Simplifies error handling with familiar try/catch
Easier debugging — stack traces are cleaner
Works with every Promise-based API (fetch, timers, file I/O)

JavaScript async/await Execution Flow - Pause and Resume

How async/await Works Internally

Example

┌─────────────────────────────────────────────────────────────┐ │ ASYNC/AWAIT EXECUTION FLOW │ │ │ │ async function fetchData() { │ │ ┌─────────────────────────────────┐ │ │ │ 1. Function starts executing │ │ │ │ synchronously │ │ │ └────────────────┬────────────────┘ │ │ │ │ │ await fetch(url) │ │ │ │ │ ┌────────────────▼────────────────┐ │ │ │ 2. Function is SUSPENDED here │ │ │ │ (paused, not blocked) │ │ │ │ Returns control to caller │ │ │ └────────────────┬────────────────┘ │ │ │ │ │ ┌─────────▼──────────┐ │ │ │ WEB API handles │ │ │ │ network request │ │ │ └─────────┬──────────┘ │ │ │ Promise resolves │ │ ┌────────────────▼────────────────┐ │ │ │ 3. Function RESUMES │ │ │ │ (via microtask queue) │ │ │ │ response = resolved value │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘

Key insight: await does NOT block the JavaScript thread. It suspends only that async function, while the rest of the program keeps running.

Basic Syntax

The `async` Keyword

An async function always returns a Promise, even if you return a plain value.

Example

// Regular function returns a value function regularFunction() { return 42; } console.log(regularFunction()); // 42 (just a number) // Async function wraps return value in a Promise async function asyncFunction() { return 42; } console.log(asyncFunction()); // Promise { 42 } asyncFunction().then(val => console.log(val)); // 42

Output

Promise { 42 }
42

The `await` Keyword

await can only be used inside an async function. It pauses the function until the Promise resolves.

Example

async function getNumber() { // await pauses here until Promise.resolve(7) settles const value = await Promise.resolve(7); console.log("Got value:", value); return value * 2; } getNumber().then(result => console.log("Final result:", result)); console.log("This runs BEFORE the async function resumes!");

Output

This runs BEFORE the async function resumes!
Got value: 7
Final result: 14

Step-by-Step Execution Tracing

Example

console.log("A - Start"); // Step 1: Runs synchronously async function run() { console.log("B - Inside async fn"); // Step 2: Runs synchronously const result = await Promise.resolve("hello"); // Step 3: SUSPENDS here console.log("D - After await:", result); // Step 5: Resumes via microtask return "done"; } const promise = run(); // Starts the async function console.log("C - After calling run()"); // Step 4: Runs while fn is suspended promise.then(val => console.log("E - Resolved:", val)); // Step 6

Output

A - Start
B - Inside async fn
C - After calling run()
D - After await: hello
E - Resolved: done

Execution trace:

"A - Start" — synchronous, runs immediately
"B - Inside async fn" — async function body starts synchronously
await Promise.resolve("hello") — function suspends, control returns to caller
"C - After calling run()" — outer code continues while fn is paused
"D - After await: hello" — microtask resumes the function
"E - Resolved: done" — the async function's return value

Error Handling with try/catch

The biggest advantage of async/await over .then().catch() is familiar, clean error handling.

Example

// ❌ Promise chain error handling (verbose) function fetchUserPromise(id) { return fetch(`https://jsonplaceholder.typicode.com/users/${id}`) .then(response => { if (!response.ok) throw new Error(`HTTP ${response.status}`); return response.json(); }) .then(user => { return user.name; }) .catch(error => { console.error("Fetch error:", error.message); return null; }); } // ✅ async/await error handling (clean and readable) async function fetchUser(id) { try { const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`); if (!response.ok) { throw new Error(`HTTP Error: ${response.status}`); } const user = await response.json(); console.log("User found:", user.name); return user.name; } catch (error) { // Catches BOTH network errors AND our thrown error console.error("Failed to fetch user:", error.message); return null; } finally { // Always runs — great for cleanup console.log("Fetch attempt complete"); } } fetchUser(1); fetchUser(999999); // Will get 404

Output

User found: Leanne Graham
Fetch attempt complete
Failed to fetch user: HTTP Error: 404
Fetch attempt complete

Real-World Usage: API Data Fetching

Example

// Fetch user profile and their latest post async function loadUserProfile(userId) { try { console.log(`Loading profile for user ${userId}...`); // Step 1: Get user const userResponse = await fetch( `https://jsonplaceholder.typicode.com/users/${userId}` ); const user = await userResponse.json(); console.log(`✅ User: ${user.name} (${user.email})`); // Step 2: Get their posts const postsResponse = await fetch( `https://jsonplaceholder.typicode.com/posts?userId=${userId}` ); const posts = await postsResponse.json(); console.log(`✅ Total posts: ${posts.length}`); // Step 3: Get comments on the latest post const latestPost = posts[0]; const commentsResponse = await fetch( `https://jsonplaceholder.typicode.com/comments?postId=${latestPost.id}` ); const comments = await commentsResponse.json(); console.log(`✅ Comments on latest post: ${comments.length}`); return { user, posts, latestPost, comments }; } catch (error) { console.error("❌ Profile load failed:", error.message); throw error; // Re-throw so the caller can handle it too } } loadUserProfile(1);

Output

Loading profile for user 1...
✅ User: Leanne Graham (Sincere@april.biz)
✅ Total posts: 10
✅ Comments on latest post: 5

Sequential vs Parallel Execution

This is one of the most important performance concepts with async/await.

Sequential (One After Another)

Example

async function sequential() { console.time("sequential"); const user = await fetch("https://jsonplaceholder.typicode.com/users/1").then(r => r.json()); const posts = await fetch("https://jsonplaceholder.typicode.com/posts/1").then(r => r.json()); const todos = await fetch("https://jsonplaceholder.typicode.com/todos/1").then(r => r.json()); console.timeEnd("sequential"); // ⚠️ Takes: time(user) + time(posts) + time(todos) ≈ 300-600ms return { user, posts, todos }; }

Output

sequential: ~450ms   ← sum of all request times

Parallel (All at Once with Promise.all)

Example

async function parallel() { console.time("parallel"); // Start ALL requests simultaneously const [user, posts, todos] = await Promise.all([ fetch("https://jsonplaceholder.typicode.com/users/1").then(r => r.json()), fetch("https://jsonplaceholder.typicode.com/posts/1").then(r => r.json()), fetch("https://jsonplaceholder.typicode.com/todos/1").then(r => r.json()) ]); console.timeEnd("parallel"); // ✅ Takes: max(time(user), time(posts), time(todos)) ≈ 150ms return { user, posts, todos }; }

Output

parallel: ~150ms   ← only the slowest request time

Example

SEQUENTIAL vs PARALLEL: ────────────────────────────────────────────────────────── Sequential: │ fetch user (150ms) │ fetch posts (200ms) │ fetch todos (100ms) │ Total: 450ms Parallel (Promise.all): │ fetch user (150ms) │ │ fetch posts (200ms) │ │ fetch todos (100ms) │ Total: 200ms ← Only waits for the SLOWEST ──────────────────────────────────────────────────────────

Rule of thumb: Use await sequentially only when each step depends on the previous one. Use Promise.all when operations are independent.

Common Mistakes ⚠️

Mistake 1: Missing `await` — Getting a Promise Instead of a Value

javascript example

// ❌ WRONG: forgot await
async function wrong() {
  const data = fetch("https://jsonplaceholder.typicode.com/posts/1");
  console.log(data); // Promise { <pending> } — NOT the data!
  console.log(data.title); // undefined
}

// ✅ CORRECT: use await
async function correct() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data.title); // "sunt aut facere..."
}

Mistake 2: Using `await` Outside `async` Function

javascript example

// ❌ WRONG: await outside async function (syntax error)
function notAsync() {
  const result = await Promise.resolve(42); // SyntaxError!
  return result;
}

// ✅ CORRECT: mark function as async
async function isAsync() {
  const result = await Promise.resolve(42); // Works!
  return result;
}

Mistake 3: Unhandled Async Errors

javascript example

// ❌ WRONG: error will be an unhandled rejection
async function dangerousCall() {
  const result = await Promise.reject(new Error("Oops!"));
  return result;
}
dangerousCall(); // UnhandledPromiseRejectionWarning!

// ✅ CORRECT: always catch errors
async function safeCall() {
  try {
    const result = await Promise.reject(new Error("Oops!"));
    return result;
  } catch (err) {
    console.error("Handled:", err.message);
    return null;
  }
}
safeCall();

Output

Handled: Oops!

Mistake 4: Sequential `await` in a Loop (Performance Anti-Pattern)

Example

Interview Questions 🎯

Q1. What is the difference between async/await and Promises?

async/await is syntactic sugar built on top of Promises. Internally, every async function returns a Promise, and await unwraps a Promise's resolved value. The difference is purely syntactic — async/await makes code more readable and error handling cleaner via try/catch, but the underlying mechanics are identical.

Q2. Does await block the JavaScript thread?

No. await suspends only the *current async function*, not the entire thread. While the async function is paused waiting for a Promise, the JavaScript engine continues executing other code. This is why you see synchronous code after an async call run before the awaited value is returned.

Q3. What does an async function return if you return a plain value?

It wraps the value in a resolved Promise automatically. async function f() { return 42; } returns Promise.resolve(42). If you throw inside an async function, it returns Promise.reject(error).

Q4. What happens if you forget await before a Promise?

You get the Promise object itself (in pending state), not the resolved value. const data = fetch(url) gives you a Promise, not the response. Always use await or .then() to extract the value.

Q5. How do you handle errors in async/await?

Use try/catch/finally blocks. The catch block catches both synchronous throws and rejected Promises. The finally block always runs, making it perfect for cleanup like hiding loading spinners.

Q6. How do you run multiple async operations in parallel with async/await?

Use Promise.all(): const [a, b] = await Promise.all([fetchA(), fetchB()]). This starts both requests simultaneously and waits for both to complete, instead of running them one after the other.

Q7. Can you use await at the top level (outside any function)?

In modern JavaScript (ES2022+), yes — top-level await is supported in ES Modules. In older environments or CommonJS, you must wrap code in an async function: (async () => { await someCall(); })().

Q8. What is the execution order of async/await with other async operations?

1. Synchronous code runs first. 2. await suspends the async function and returns control. 3. Remaining synchronous code runs. 4. Microtask queue (Promise callbacks) runs. 5. Macrotask queue (setTimeout) runs.

Key Takeaways 📌

async functions always return a Promise
await can only be used inside async functions (or top-level in ES Modules)
await suspends the function, not the entire thread
Use try/catch for error handling — it catches both sync throws and Promise rejections
Use Promise.all() for parallel operations; sequential await is for dependent operations
Forgetting await gives you a Promise object, not the resolved value
async/await is just cleaner syntax — it uses the same Promise machinery underneath

Quick Reference

Example

// Basic pattern async function example() { try { const result = await someAsyncOperation(); return result; } catch (error) { console.error(error.message); } finally { // always runs } } // Parallel pattern async function parallel() { const [a, b, c] = await Promise.all([opA(), opB(), opC()]); return { a, b, c }; } // Loop pattern async function processAll(items) { return Promise.all(items.map(async item => { const result = await process(item); return result; })); }

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Async Await - Complete Guide with Examples & Error Handling.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, asynchronous, async, await

Continue learning this concept

Asynchronous JavaScriptJavaScript Call Stack - Complete Guide with Visual Diagrams & ExamplesUnderstand JavaScript Asynchronous JavaScriptJavaScript Callback Queue (Task Queue) - Complete Guide with DiagramsMaster JavaScript Asynchronous JavaScriptJavaScript Callbacks - Complete Guide with Callback Hell & PatternsMaster JavaScript callbacks from basics to advanced patterns. Learn callback functions, higher-order functions, callback hell, error-first callbacks, and how callbacks interact with the event loop and task queues.Asynchronous JavaScriptJavaScript Event Loop - Complete Guide with Visual Diagrams & ExamplesMaster JavaScript Asynchronous JavaScriptJavaScript Fetch API - Complete Guide with Examples, Error Handling & Async/AwaitMaster JavaScript Asynchronous JavaScriptJSON in JavaScript - Complete Guide: Parse, Stringify, Fetch & Error HandlingMaster JSON in JavaScript: JSON.parse(), JSON.stringify(), working with fetch API, handling errors, nested structures, custom replacers/revivers, and real-world patterns.

PreviousJavaScript Mouse Events – Complete Guide with Examples (2026)NextJavaScript Call Stack - Complete Guide with Visual Diagrams & Examples

Introduction

How async/await Works Internally

Basic Syntax

The async Keyword

The await Keyword

Step-by-Step Execution Tracing

Error Handling with try/catch

Real-World Usage: API Data Fetching

Sequential vs Parallel Execution

Sequential (One After Another)

Parallel (All at Once with Promise.all)

Common Mistakes ⚠️

Mistake 1: Missing await — Getting a Promise Instead of a Value

Mistake 2: Using await Outside async Function

Mistake 3: Unhandled Async Errors

Mistake 4: Sequential await in a Loop (Performance Anti-Pattern)

Interview Questions 🎯

Key Takeaways 📌

Quick Reference

Continue learning this concept

Introduction

How async/await Works Internally

Basic Syntax

The async Keyword

The await Keyword

Step-by-Step Execution Tracing

Error Handling with try/catch

Real-World Usage: API Data Fetching

Sequential vs Parallel Execution

Sequential (One After Another)

Parallel (All at Once with Promise.all)

Common Mistakes ⚠️

Mistake 1: Missing await — Getting a Promise Instead of a Value

Mistake 2: Using await Outside async Function

Mistake 3: Unhandled Async Errors

Mistake 4: Sequential await in a Loop (Performance Anti-Pattern)

Interview Questions 🎯

Key Takeaways 📌

Quick Reference

Continue learning this concept

The `async` Keyword

The `await` Keyword

Mistake 1: Missing `await` — Getting a Promise Instead of a Value

Mistake 2: Using `await` Outside `async` Function

Mistake 4: Sequential `await` in a Loop (Performance Anti-Pattern)

The `async` Keyword

The `await` Keyword

Mistake 1: Missing `await` — Getting a Promise Instead of a Value

Mistake 2: Using `await` Outside `async` Function

Mistake 4: Sequential `await` in a Loop (Performance Anti-Pattern)