Async/Await Best Practices in JavaScript

Async/await makes asynchronous code easier to write and read. Let’s explore best practices.

Basic Usage

javascript

async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    return await response.json()
  } catch (error) {
    console.error('Failed to fetch user:', error)
    throw error
  }
}

Parallel Execution

javascript

// Sequential - Slow
async function getDataSequential() {
  const users = await fetchUsers()
  const posts = await fetchPosts()
  return { users, posts }
}

// Parallel - Fast
async function getDataParallel() {
  const [users, posts] = await Promise.all([
    fetchUsers(),
    fetchPosts()
  ])
  return { users, posts }
}

Error Handling Patterns

Individual Error Handling

javascript

const [usersResult, postsResult] = await Promise.allSettled([
  fetchUsers(),
  fetchPosts()
])

if (usersResult.status === 'fulfilled') {
  console.log(usersResult.value)
}

Wrapper Function

javascript

async function safeAsync(promise) {
  try {
    const data = await promise
    return [data, null]
  } catch (error) {
    return [null, error]
  }
}

const [user, error] = await safeAsync(fetchUser(1))
if (error) {
  // Handle error
}

Common Mistakes

Forgetting await

javascript

// Bug: returns Promise, not data
function getData() {
  return fetch('/api/data').then(r => r.json())
}

// Fix
async function getData() {
  return await fetch('/api/data').then(r => r.json())
}

Await in Loops

javascript

// Slow: sequential
for (const id of ids) {
  await processItem(id)
}

// Fast: parallel
await Promise.all(ids.map(id => processItem(id)))