Async/Await — JavaScript Reference, Syntax & Examples

Syntax

async function name() {
  const result = await promise;
}

Examples

Basic Async/Await

Using async/await to handle promises in a cleaner way.

// Async function declaration
async function fetchUser() {
  const response = await fetch("https://api.example.com/user/1");
  const data = await response.json();
  return data;
}

// Using the async function
fetchUser()
  .then(user => console.log(user))
  .catch(err => console.error(err));

// Arrow function version
const getUser = async () => {
  const response = await fetch("https://api.example.com/user/1");
  return await response.json();
};

Error Handling

Using try/catch blocks to handle errors in async functions.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log("Data received:", data);
    return data;
  } catch (error) {
    console.error("Failed to fetch data:", error.message);
    return null;
  } finally {
    console.log("Fetch attempt completed");
  }
}

fetchData();

Sequential vs Parallel

Understanding when to await sequentially vs run operations in parallel.

// Sequential - one after another (slower)
async function sequential() {
  const user = await fetch("/api/user");
  const posts = await fetch("/api/posts");
  const comments = await fetch("/api/comments");
  // Total time = sum of all requests
}

// Parallel - all at once (faster)
async function parallel() {
  const [user, posts, comments] = await Promise.all([
    fetch("/api/user"),
    fetch("/api/posts"),
    fetch("/api/comments")
  ]);
  // Total time = slowest request
}

// Conditional parallel
async function conditional() {
  const user = await fetch("/api/user");
  
  // Only after user is fetched, get these in parallel
  const [posts, friends] = await Promise.all([
    fetch(`/api/users/${user.id}/posts`),
    fetch(`/api/users/${user.id}/friends`)
  ]);
}

Real-World Example

Practical async/await usage in a complete data fetching scenario.

async function loadUserDashboard(userId) {
  try {
    console.log("Loading dashboard...");
    
    // Fetch user profile first
    const userResponse = await fetch(`/api/users/${userId}`);
    const user = await userResponse.json();
    console.log("User loaded:", user.name);
    
    // Then fetch related data in parallel
    const [posts, notifications, stats] = await Promise.all([
      fetch(`/api/users/${userId}/posts`).then(r => r.json()),
      fetch(`/api/users/${userId}/notifications`).then(r => r.json()),
      fetch(`/api/users/${userId}/stats`).then(r => r.json())
    ]);
    
    // Assemble dashboard data
    const dashboard = {
      user,
      posts,
      notifications,
      stats
    };
    
    console.log("Dashboard ready!");
    return dashboard;
  } catch (error) {
    console.error("Dashboard load failed:", error);
    throw new Error("Failed to load dashboard");
  }
}

// Usage
loadUserDashboard(123)
  .then(data => console.log(data))
  .catch(err => console.error(err));

Best practices

Always use try/catch blocks to handle errors in async functions
Use Promise.all() for parallel operations to improve performance
Don't forget that async functions always return a Promise
Avoid awaiting in loops - use Promise.all() with map instead
Add finally blocks for cleanup operations that should always run
Consider using Promise.allSettled() when you want all results regardless of failures

Browser compatibility

chrome: Yes
firefox: Yes
safari: Yes
edge: Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

ECMAScript specification

Specifications & further reading

ECMAScript specification