How does async/await work in JavaScript? Show how to handle errors with try/catch and the best practices.

Question

Accepted Answer

Async/await is a modern syntax for working with Promises. It makes asynchronous code more readable by making it look like synchronous code.

The async keyword declares an asynchronous function. The await keyword pauses execution until the Promise resolves.

async function fetchUserData(userId) {
  const response = await fetch('/api/users/' + userId);
  const user = await response.json();
  return user;
}

An async function always returns a Promise. If you return a value, it is automatically wrapped in Promise.resolve.

async function hello() {
  return 'Hello';
}

// Equivalent to:
function hello() {
  return Promise.resolve('Hello');
}

Error handling with try/catch looks like this.

async function getUserPosts(userId) {
  try {
    const userResponse = await fetch('/api/users/' + userId);

    if (!userResponse.ok) {
      throw new Error('User not found');
    }

    const user = await userResponse.json();
    const postsResponse = await fetch('/api/users/' + userId + '/posts');
    const posts = await postsResponse.json();

    return { user, posts };
  } catch (error) {
    console.error('Error:', error.message);
    throw error; // Re-throw for the calling handler
  }
}

Be careful not to create unnecessary sequential requests.

// BAD: sequential, slow
async function getData() {
  const users = await fetch('/api/users');
  const posts = await fetch('/api/posts'); // Waits for users first
}

// GOOD: parallel, fast
async function getData() {
  const [users, posts] = await Promise.all([
    fetch('/api/users'),
    fetch('/api/posts')
  ]);
}

Error handling with Promise.all requires attention because one error fails the entire operation.

async function fetchMultiple() {
  try {
    const results = await Promise.all([
      fetch('/api/users'),
      fetch('/api/posts'),
      fetch('/api/comments')
    ]);
    return results;
  } catch (error) {
    // A single failure causes Promise.all to reject
    console.error('One request failed:', error);
  }
}

Best practices include always wrapping await in try/catch when errors should be handled locally, using Promise.all for independent operations, remembering that await only works inside an async function, and avoiding await in loops when iterations are independent.