JavaScript Async/Await: Der komplette Guide 2025

1. Promises verstehen

Ein Promise repräsentiert das Ergebnis einer asynchronen Operation. Es kann drei Zustände haben: pending, fulfilled oder rejected.

// Promise manuell erstellen
const myPromise = new Promise((resolve, reject) => {
  const success = true
  
  if (success) {
    resolve('Operation erfolgreich!')
  } else {
    reject(new Error('Fehler aufgetreten'))
  }
})

2. async/await Syntax

async/await macht asynchronen Code lesbar wie synchronen Code.

// async Funktion deklarieren
async function getUserData(userId) {
  const response = await fetch(`/api/users/${userId}`)
  const userData = await response.json()
  return userData
}

3. Error Handling mit try/catch

async function safeApiCall() {
  try {
    const response = await fetch('/api/data')
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`)
    }
    
    const data = await response.json()
    return data
  } catch (error) {
    console.error('API-Fehler:', error)
    return null
  }
}

5. Parallele Requests mit Promise.all()

// ❌ Sequenziell (langsam)
const user1 = await fetch('/api/users/1').then(r => r.json())
const user2 = await fetch('/api/users/2').then(r => r.json())

// ✅ Parallel (schnell)
const [userA, userB] = await Promise.all([
  fetch('/api/users/1').then(r => r.json()),
  fetch('/api/users/2').then(r => r.json())
])