Async & Await in JavaScript

Modern JavaScript provides async/await syntax for writing asynchronous code that looks synchronous, making it easier to read and maintain.

🤔 What is Async/Await?

Async/Await is syntactic sugar built on top of Promises that makes asynchronous code easier to write and read. It allows you to write promise-based code as if it were synchronous.

async - Makes a function return a Promise
await - Pauses execution until Promise settles
Error Handling - Use try/catch blocks
Clean Syntax - No more .then() chains

💡 Key Benefits

Cleaner, more readable code
Better error handling with try/catch
Easier debugging (stack traces)
Sequential-looking asynchronous code

Syntax Comparison

fetch().then().catch() vs async/await with try/catch

📝 Basic Async/Await Example

Compare traditional Promise chaining with the cleaner async/await syntax.

JavaScript Editor

Rules:

async function always returns a Promise
await can only be used inside async functions
await pauses execution until Promise resolves or rejects
Use try/catch for error handling

🔗 Multiple Async Operations

Sequential vs parallel execution of multiple async operations.

JavaScript Editor

⚠️ Sequential Execution

Each await waits for the previous operation to complete. This can be slow if operations don't depend on each other.

⚡ Parallel Execution

Use Promise.all() to run multiple async operations in parallel.

JavaScript Editor

Parallel Execution Methods:

Promise.all() - All promises must succeed
Promise.allSettled() - Wait for all to settle
Promise.race() - First to settle wins
Promise.any() - First to succeed wins

When to Use:

Sequential: Operations depend on previous results
Parallel: Independent operations for better performance

🚨 Error Handling

Proper error handling is crucial in async/await code.

JavaScript Editor

// Error handling in async/await
function simulateAPICall(shouldFail = false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldFail) {
        reject(new Error("API request failed!"));
      } else {
        resolve({ data: "Success!" });
      }
    }, 500);
  });
}

async function handleAPI() {
  try {
    // Multiple API calls with individual error handling
    const result1 = await simulateAPICall(false).catch(error => {
      console.log("API 1 failed, using default");
      return { data: "Default" };
    });
    
    const result2 = await simulateAPICall(true).catch(error => {
      console.log("API 2 failed, using fallback");
      return { data: "Fallback" };
    });
    
    console.log("Result 1:", result1);
    console.log("Result 2:", result2);
    
    // Try-catch block for multiple operations
    try {
      const result3 = await simulateAPICall(false);
      const result4 = await simulateAPICall(true);
      console.log("Result 3:", result3);
      console.log("Result 4:", result4);
    } catch (error) {
      console.log("Caught in inner try-catch:", error.message);
    }
    
  } catch (error) {
    console.log("Caught in outer try-catch:", error.message);
  }
}

handleAPI();

Error Handling Patterns:

Try/catch blocks (recommended)
.catch() on individual promises
Global error handlers
Fallback values with nullish coalescing

🎯 Practical Example

Complete authentication flow using async/await with proper error handling.

JavaScript Editor

// Practical Example: User Authentication Flow
async function login(username, password) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (username === "admin" && password === "1234") {
        resolve({ token: "abc123", user: { name: "Admin", role: "admin" } });
      } else {
        reject(new Error("Invalid credentials"));
      }
    }, 800);
  });
}

async function getUserProfile(token) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        email: "admin@example.com",
        settings: { theme: "dark", notifications: true }
      });
    }, 600);
  });
}

async function getDashboardData(token) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        stats: { users: 150, revenue: 50000 },
        recentActivity: ["Login", "Update Profile", "Upload File"]
      });
    }, 700);
  });
}

// Main authentication flow
async function authenticateUser(username, password) {
  console.log("Starting authentication...");
  
  try {
    // Step 1: Login
    const auth = await login(username, password);
    console.log("Login successful!");
    console.log("Token:", auth.token);
    
    // Step 2 & 3: Fetch profile and dashboard in parallel
    console.log("\nFetching user data...");
    const [profile, dashboard] = await Promise.all([
      getUserProfile(auth.token),
      getDashboardData(auth.token)
    ]);
    
    console.log("Profile:", profile);
    console.log("Dashboard:", dashboard);
    
    // Return complete user data
    return {
      ...auth,
      profile,
      dashboard
    };
    
  } catch (error) {
    console.error("Authentication failed:", error.message);
    throw error;
  }
}

// Test the flow
authenticateUser("admin", "1234")
  .then(userData => {
    console.log("\n✅ Complete user data:", userData);
  })
  .catch(error => {
    console.log("\n❌ Authentication error:", error.message);
  });

// Try with wrong credentials:
// authenticateUser("wrong", "password");

💡 Best Practices:

Always wrap await calls in try/catch
Use Promise.all() for independent operations
Handle errors at appropriate levels
Use descriptive error messages
Implement retry logic for network requests

Next Steps

Now that you understand async/await, learn how to use the Fetch API for making HTTP requests in the browser.

← Promises Fetch API →

JavaScript Tutorial

Async & Await in JavaScript

🤔 What is Async/Await?

💡 Key Benefits

Syntax Comparison

📝 Basic Async/Await Example

Rules:

🔗 Multiple Async Operations

⚠️ Sequential Execution

⚡ Parallel Execution

Parallel Execution Methods:

When to Use:

🚨 Error Handling

Error Handling Patterns:

🎯 Practical Example

💡 Best Practices:

Next Steps

Explore Related Tools

AI Keyword Extractor

Introduction to Android & Android Studio

Base64 Viewer Online

Bmp To Jpg Converter

Bmp To Png Converter

Bootstrap 5 Admin Dashboard: Responsive Admin Template Guide

Follow Us

Our Tools

Our Company

Special Tools