JavaScript Fundamentals

Async/Await

Cleaner way to work with promises - write async code like synchronous

Find videos you like?

Save to resource drawer for future reference!

What is Async/Await?

Async/await is syntactic sugar over promises that makes async code look and behave like synchronous code. No more .then() chains - write cleaner, more readable code!

Same Power, Better Syntax

Async/await doesn't replace promises - it's just a cleaner way to work with them. Under the hood, it's still promises!

The async Keyword

Makes a function return a promise

async Function

Put async before a function to make it always return a promise

// Regular function
function regularFunction() {
  return 'Hello';
}

// Async function - automatically returns a promise
async function asyncFunction() {
  return 'Hello';
}

// Both are promises!
asyncFunction().then(result => {
  console.log(result);  // 'Hello'
});

async Functions

Always return promises

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

The await Keyword

Wait for a promise to resolve

await Pauses Execution

Use await before a promise to pause and wait for the result

Important: You can only use await inside async functions!

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data);
}

// Without await (promises):
function fetchData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data));
}

await Examples

Pausing for promises

javascript

code

DarkEditable

// Simple await
async function getUser() {
  const response = await fetch('/api/user/1');
  const user = await response.json();
  console.log(user);
}

// Multiple awaits in sequence
async function loadUserData() {
  console.log('Loading user...');
  const user = await fetch('/api/user').then(r => r.json());
  
  console.log('Loading posts...');
  const posts = await fetch(`/api/user/${user.id}/posts`).then(r => r.json());
  
  console.log('Done!', { user, posts });
}

// Simulated async operation
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function countdown() {
  console.log('3...');
  await delay(1000);
  
  console.log('2...');
  await delay(1000);
  
  console.log('1...');
  await delay(1000);
  
  console.log('Go!');
}

countdown();  // Counts down over 3 seconds

// Real-world example
async function getUserProfile() {
  const userId = await getUserId();
  const user = await fetchUser(userId);
  const avatar = await fetchAvatar(user.avatarId);
  
  return { ...user, avatar };
}

function getUserId() {
  return Promise.resolve(123);
}

function fetchUser(id) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id, name: 'Alice', avatarId: 'av-1' });
    }, 1000);
  });
}

function fetchAvatar(avatarId) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('https://example.com/avatar.png');
    }, 500);
  });
}

getUserProfile().then(profile => {
  console.log('Profile loaded:', profile);
});

Console Output

Click "Run Code" to see output here...

Error Handling with try/catch

Handle errors in async functions

Use try/catch

Wrap await in try/catch to handle errors

async function fetchUser() {
  try {
    const response = await fetch('/api/user');
    
    if (!response.ok) {
      throw new Error('Failed to fetch');
    }
    
    const user = await response.json();
    console.log('Success:', user);
    return user;
    
  } catch (error) {
    console.log('Error:', error.message);
    return null;
  }
}

fetchUser();

Error Handling Examples

try/catch with async/await

javascript

code

DarkEditable

// Basic error handling
async function loadData() {
  try {
    const data = await fetch('/api/data');
    console.log('Success!', data);
  } catch (error) {
    console.log('Failed:', error);
  }
}

// Multiple operations with error handling
async function processUser(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchPosts(user.id);
    const comments = await fetchComments(posts[0].id);
    
    return { user, posts, comments };
    
  } catch (error) {
    console.log('Something went wrong:', error.message);
    return null;
  }
}

// try/catch with finally
async function saveData(data) {
  let isLoading = true;
  
  try {
    await api.save(data);
    console.log('Saved successfully');
    
  } catch (error) {
    console.log('Save failed:', error);
    
  } finally {
    isLoading = false;
    console.log('Operation complete');
  }
}

// Specific error handling
async function login(username, password) {
  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ username, password })
    });
    
    if (response.status === 401) {
      throw new Error('Invalid credentials');
    }
    
    if (response.status === 429) {
      throw new Error('Too many attempts');
    }
    
    if (!response.ok) {
      throw new Error('Login failed');
    }
    
    const user = await response.json();
    return user;
    
  } catch (error) {
    if (error.message === 'Invalid credentials') {
      console.log('Wrong username or password');
    } else if (error.message === 'Too many attempts') {
      console.log('Please wait before trying again');
    } else {
      console.log('Login error:', error);
    }
    return null;
  }
}

// Real-world: Form submission
async function submitForm(formData) {
  const submitButton = document.querySelector('button');
  submitButton.disabled = true;
  
  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData
    });
    
    const result = await response.json();
    
    if (result.success) {
      console.log('Form submitted!');
    } else {
      console.log('Validation errors:', result.errors);
    }
    
  } catch (error) {
    console.log('Network error:', error);
    
  } finally {
    submitButton.disabled = false;
  }
}

Console Output

Click "Run Code" to see output here...

Parallel vs Sequential

Run multiple operations at once

Optimize Performance

Sequential (Slow)

async function loadData() {
  const user = await fetchUser();
  const posts = await fetchPosts();
  const stats = await fetchStats();
  // Takes 6 seconds total
  // (2s + 2s + 2s)
}

✅ Parallel (Fast)

async function loadData() {
  const [user, posts, stats] = 
    await Promise.all([
      fetchUser(),
      fetchPosts(),
      fetchStats()
    ]);
  // Takes 2 seconds total!
}

Parallel Execution

Run independent operations together

javascript

code

DarkEditable

// Sequential - one after another (SLOW)
async function loadSequential() {
  const user = await fetch('/api/user').then(r => r.json());
  const posts = await fetch('/api/posts').then(r => r.json());
  const comments = await fetch('/api/comments').then(r => r.json());
  
  console.log({ user, posts, comments });
  // If each takes 1 second, total = 3 seconds
}

// Parallel - all at once (FAST)
async function loadParallel() {
  const [user, posts, comments] = await Promise.all([
    fetch('/api/user').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/comments').then(r => r.json())
  ]);
  
  console.log({ user, posts, comments });
  // If each takes 1 second, total = 1 second!
}

// Real-world: Dashboard data
async function loadDashboard() {
  try {
    const [userData, statsData, notificationsData] = await Promise.all([
      fetch('/api/user'),
      fetch('/api/stats'),
      fetch('/api/notifications')
    ]);
    
    const user = await userData.json();
    const stats = await statsData.json();
    const notifications = await notificationsData.json();
    
    return { user, stats, notifications };
    
  } catch (error) {
    console.log('Failed to load dashboard:', error);
  }
}

// When to use sequential vs parallel:

// Use SEQUENTIAL when operations depend on each other
async function getUserPosts() {
  const user = await fetchUser();
  const posts = await fetchPostsByUserId(user.id);  // Needs user.id
  return posts;
}

// Use PARALLEL when operations are independent
async function loadPageData() {
  const [header, sidebar, footer] = await Promise.all([
    fetchHeader(),
    fetchSidebar(),
    fetchFooter()
  ]);
  return { header, sidebar, footer };
}

Console Output

Click "Run Code" to see output here...

Key Takeaways

Do This ✅

• Use async before function
• Use await before promises
• Wrap in try/catch for errors
• Use Promise.all() for parallel
• Always handle errors

Avoid This ❌

• Don't use await in non-async functions
• Don't forget error handling
• Don't await unnecessarily in loops
• Don't use sequential when parallel is better
• Don't mix async/await with .then()

Quick Reference

async function - Makes function return promise

await promise - Wait for promise result

try/catch - Handle errors

Promise.all() - Run multiple in parallel

finally - Cleanup code

Modern Standard

Async/await is the modern, preferred way to handle asynchronous code in JavaScript. It's cleaner, easier to read, and easier to debug than promise chains!

Previous Topic

Promise Methods

Promise.all, Promise.race, Promise.allSettled, Promise.any for parallel operations.

Next Topic

Async Error Handling

try-catch-finally patterns for async/await error management.

Ask a Question

Have a question about Async/Await? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

Async/Await

Cleaner way to work with promises - write async code like synchronous

Find videos you like?

Save to resource drawer for future reference!

What is Async/Await?

Async/await is syntactic sugar over promises that makes async code look and behave like synchronous code. No more .then() chains - write cleaner, more readable code!

Same Power, Better Syntax

Async/await doesn't replace promises - it's just a cleaner way to work with them. Under the hood, it's still promises!

The async Keyword

Makes a function return a promise

async Function

Put async before a function to make it always return a promise

// Regular function
function regularFunction() {
  return 'Hello';
}

// Async function - automatically returns a promise
async function asyncFunction() {
  return 'Hello';
}

// Both are promises!
asyncFunction().then(result => {
  console.log(result);  // 'Hello'
});

async Functions

Always return promises

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

The await Keyword

Wait for a promise to resolve

await Pauses Execution

Use await before a promise to pause and wait for the result

Important: You can only use await inside async functions!

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data);
}

// Without await (promises):
function fetchData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data));
}

await Examples

Pausing for promises

javascript

code

DarkEditable

// Simple await
async function getUser() {
  const response = await fetch('/api/user/1');
  const user = await response.json();
  console.log(user);
}

// Simulated async operation
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function countdown() {
  console.log('3...');
  await delay(1000);
  
  console.log('2...');
  await delay(1000);
  
  console.log('1...');
  await delay(1000);
  
  console.log('Go!');
}

countdown();  // Counts down over 3 seconds

function getUserId() {
  return Promise.resolve(123);
}

function fetchUser(id) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id, name: 'Alice', avatarId: 'av-1' });
    }, 1000);
  });
}

function fetchAvatar(avatarId) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('https://example.com/avatar.png');
    }, 500);
  });
}

getUserProfile().then(profile => {
  console.log('Profile loaded:', profile);
});

Console Output

Click "Run Code" to see output here...

Error Handling with try/catch

Handle errors in async functions

Use try/catch

Wrap await in try/catch to handle errors

async function fetchUser() {
  try {
    const response = await fetch('/api/user');
    
    if (!response.ok) {
      throw new Error('Failed to fetch');
    }
    
    const user = await response.json();
    console.log('Success:', user);
    return user;
    
  } catch (error) {
    console.log('Error:', error.message);
    return null;
  }
}

fetchUser();

Error Handling Examples

try/catch with async/await

javascript

code

DarkEditable

// Basic error handling
async function loadData() {
  try {
    const data = await fetch('/api/data');
    console.log('Success!', data);
  } catch (error) {
    console.log('Failed:', error);
  }
}

Console Output

Click "Run Code" to see output here...

Parallel vs Sequential

Run multiple operations at once

Optimize Performance

Sequential (Slow)

async function loadData() {
  const user = await fetchUser();
  const posts = await fetchPosts();
  const stats = await fetchStats();
  // Takes 6 seconds total
  // (2s + 2s + 2s)
}

✅ Parallel (Fast)

async function loadData() {
  const [user, posts, stats] = 
    await Promise.all([
      fetchUser(),
      fetchPosts(),
      fetchStats()
    ]);
  // Takes 2 seconds total!
}

Parallel Execution

Run independent operations together

javascript

code

DarkEditable

// When to use sequential vs parallel:

Console Output

Click "Run Code" to see output here...

Key Takeaways

Do This ✅

• Use async before function
• Use await before promises
• Wrap in try/catch for errors
• Use Promise.all() for parallel
• Always handle errors

Avoid This ❌

• Don't use await in non-async functions
• Don't forget error handling
• Don't await unnecessarily in loops
• Don't use sequential when parallel is better
• Don't mix async/await with .then()

Quick Reference

async function - Makes function return promise

await promise - Wait for promise result

try/catch - Handle errors

Promise.all() - Run multiple in parallel

finally - Cleanup code

Modern Standard

Async/await is the modern, preferred way to handle asynchronous code in JavaScript. It's cleaner, easier to read, and easier to debug than promise chains!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Promise Methods

Async Error Handling

JavaScript Code Editor

Building Your Learning Module...

Async/Await

What is Async/Await?

Same Power, Better Syntax

async Function

async Functions

await Pauses Execution

await Examples

Use try/catch

Error Handling Examples

Optimize Performance

Sequential (Slow)

✅ Parallel (Fast)

Parallel Execution

Key Takeaways

Do This ✅

Avoid This ❌

Quick Reference

Modern Standard

Promise Methods

Async Error Handling

JavaScript Code Editor

Async/Await

What is Async/Await?

Same Power, Better Syntax

async Function

async Functions

await Pauses Execution

await Examples

Use try/catch

Error Handling Examples

Optimize Performance

Sequential (Slow)

✅ Parallel (Fast)

Parallel Execution

Key Takeaways

Do This ✅

Avoid This ❌

Quick Reference

Modern Standard