JavaScript

async/await in JavaScript richtig nutzen

Mit async und await schreibst du asynchronen Code, der so lesbar ist wie synchroner. Lerne die moderne Syntax und die Fehlerbehandlung kennen.

Anton

— 2 Min. Lesezeit
Teilen
async/await in JavaScript richtig nutzen

Promises sind mächtig, aber lange then-Ketten werden schnell unübersichtlich. Genau hier kommen async und await ins Spiel. Sie sind moderne Schlüsselwörter, mit denen asynchroner Code fast wie ganz normaler, von oben nach unten gelesener Code aussieht. In diesem Beitrag lernst du, wie du beide richtig einsetzt.

async: eine Funktion asynchron machen

Stellst du das Schlüsselwort async vor eine Funktion, gibt diese automatisch immer ein Promise zurück. Innerhalb einer solchen Funktion darfst du dann await verwenden.

async function begruessen() {
  return "Hallo!";
}

// Der Rückgabewert ist ein Promise
begruessen().then((text) => console.log(text)); // Hallo!

Auch wenn du nur einen einfachen Text zurückgibst, verpackt async ihn in ein Promise. Das ist die Grundlage für das nächste Schlüsselwort.

await: auf ein Ergebnis warten

Mit await hältst du den Ablauf an, bis ein Promise erfüllt ist, und bekommst direkt den Wert zurück, statt mit then arbeiten zu müssen. Wichtig: await funktioniert nur innerhalb einer async-Funktion.

function warte(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function ablauf() {
  console.log("Start");
  await warte(1000); // wartet 1 Sekunde
  console.log("Eine Sekunde später");
}

ablauf();

Der Code liest sich wie eine einfache Abfolge, obwohl im Hintergrund asynchron gewartet wird. Genau das macht await so angenehm.

Werte aus Promises holen

Der größte Vorteil zeigt sich, wenn ein Promise einen Wert liefert. Statt einer then-Kette weist du das Ergebnis einfach einer Variablen zu.

function ladeBenutzer() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ name: "Nina", id: 7 }), 500);
  });
}

async function zeigeBenutzer() {
  const benutzer = await ladeBenutzer();
  console.log("Geladen:", benutzer.name); // Geladen: Nina
}

zeigeBenutzer();

Fehler behandeln mit try/catch

Bei Promises nutzt du catch für Fehler. Mit async/await verwendest du stattdessen den vertrauten try/catch-Block, den du auch aus synchronem Code kennst.

async function ladeDaten() {
  try {
    const wert = await riskanteAktion();
    console.log("Erfolg:", wert);
  } catch (fehler) {
    console.log("Es gab einen Fehler:", fehler);
  }
}

Wirft eine der await-Operationen einen Fehler, springt der Code sofort in den catch-Block. So bleibt die Fehlerbehandlung übersichtlich an einer Stelle.

Mehrere Aufgaben parallel starten

Wenn mehrere unabhängige Aufgaben gleichzeitig laufen können, solltest du sie nicht hintereinander mit await abarbeiten. Nutze stattdessen Promise.all, um sie parallel zu starten und gemeinsam auf alle zu warten.

async function ladeAlles() {
  const [a, b] = await Promise.all([
    warte(1000),
    warte(1000)
  ]);
  console.log("Beide nach nur 1 Sekunde fertig");
}

Würdest du beide einzeln mit await aufrufen, würde es zwei Sekunden dauern. Mit Promise.all laufen sie parallel und brauchen nur eine.

Fazit

Mit async und await schreibst du asynchronen Code, der sich liest wie synchroner. Eine async-Funktion gibt immer ein Promise zurück, await wartet auf dessen Ergebnis und Fehler fängst du elegant mit try/catch. Für parallele Aufgaben kombinierst du das mit Promise.all. Diese Syntax ist heute der Standard für asynchrones JavaScript, daher lohnt es sich, sie sicher zu beherrschen.

Weiterlesen