Async / Await

The async keyword declares a function that always returns a Promise. It allows you to write async code that looks synchronous.

Basic Syntax

async function fetchData() {
  return 'Hello'; // Automatically wrapped in Promise
}

fetchData().then(result => console.log(result)); // 'Hello'

Why Use Async?

Without async/await:

function getUser() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(user => {
      return fetch(`/api/posts/${user.id}`);
    })
    .then(response => response.json())
    .then(posts => {
      console.log(posts);
    });
}

With async/await:

async function getUser() {
  const response = await fetch('/api/user');
  const user = await response.json();
  const postsResponse = await fetch(`/api/posts/${user.id}`);
  const posts = await postsResponse.json();
  console.log(posts);
}

Arrow Functions

const getData = async () => {
  const data = await fetch('/api/data');
  return data.json();
};

Top-Level Await

// In ES modules, you can use await at the top level
const response = await fetch('/api/config');
const config = await response.json();
export default config;

The await keyword pauses the async function execution until the Promise settles.

How Await Works

async function example() {
  console.log('Start');
  
  const result = await Promise.resolve('done');
  // Execution pauses here until promise resolves
  
  console.log(result); // 'done'
  console.log('End');
}

example();
// Output:
// Start
// done
// End

Await with Real Promises

async function fetchUserData() {
  // Await pauses until fetch completes
  const response = await fetch('/api/user');
  
  // Check response
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  
  // Await pauses until JSON parsing completes
  const user = await response.json();
  
  return user;
}

Parallel Operations

// BAD - sequential (slower)
async function getData() {
  const users = await fetch('/api/users');
  const posts = await fetch('/api/posts'); // Waits for users first
  return { users, posts };
}

// GOOD - parallel (faster)
async function getData() {
  const [users, posts] = await Promise.all([
    fetch('/api/users'),
    fetch('/api/posts')
  ]);
  return { users, posts };
}

Await in Loops

// Sequential processing
async function processItems(items) {
  const results = [];
  for (const item of items) {
    const result = await processItem(item);
    results.push(result);
  }
  return results;
}

// Parallel processing
async function processItemsParallel(items) {
  return Promise.all(items.map(item => processItem(item)));
}

Async/await uses try/catch for error handling, which is more intuitive than .catch() chains.

Basic try/catch

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch failed:', error);
    throw error; // Re-throw or handle
  }
}

Multiple Error Points

async function complexOperation() {
  let user;
  let posts;
  
  try {
    user = await fetchUser();
  } catch (error) {
    console.error('User fetch failed:', error);
    user = defaultUser;
  }
  
  try {
    posts = await fetchPosts(user.id);
  } catch (error) {
    console.error('Posts fetch failed:', error);
    posts = [];
  }
  
  return { user, posts };
}

Finally Block

async function loadData() {
  showLoading();
  
  try {
    const data = await fetchData();
    renderData(data);
  } catch (error) {
    showError(error);
  } finally {
    hideLoading(); // Always runs
  }
}

Error Handling Patterns

// Pattern 1: Throw on error
async function getData() {
  const response = await fetch('/api/data');
  if (!response.ok) throw new Error('Failed');
  return response.json();
}

// Pattern 2: Return null on error
async function getDataSafe() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) return null;
    return response.json();
  } catch {
    return null;
  }
}

// Pattern 3: Tuple pattern
async function getDataTuple() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) return [null, new Error('Failed')];
    const data = await response.json();
    return [data, null];
  } catch (error) {
    return [null, error];
  }
}

// Usage
const [data, error] = await getDataTuple();
if (error) handleError(error);