Mastering Async/Await in JavaScript

Async/await makes working with asynchronous code much more readable and maintainable.

Understanding Promises

Before async/await, we used promises:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Using Async/Await

Async/await provides a cleaner syntax:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Error Handling

Always use try/catch with async/await:

async function getUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    
    if (!response.ok) {
      throw new Error('User not found');
    }
    
    return await response.json();
  } catch (error) {
    console.error('Error fetching user:', error);
    return null;
  }
}

Parallel Execution

Use Promise.all() for parallel operations:

async function fetchMultiple() {
  const [users, posts, comments] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/comments').then(r => r.json())
  ]);
  
  return { users, posts, comments };
}

Common Patterns

Sequential Operations

async function processItems(items) {
  for (const item of items) {
    await processItem(item);
  }
}

Parallel with Results

async function processAllItems(items) {
  const results = await Promise.all(
    items.map(item => processItem(item))
  );
  return results;
}

Best Practices

1. Always handle errors with try/catch
2. Use Promise.all() for parallel operations
3. Avoid mixing async/await with .then()
4. Return promises from async functions
5. Use async/await at the top level when possible

Conclusion

Async/await makes asynchronous JavaScript code more readable and easier to maintain. Master these patterns to write better async code.