Async/Await in JavaScript

Einführung

Die Einführung von async und await in JavaScript ES7 markierte einen bedeutenden Fortschritt in der Art und Weise, wie asynchroner Code geschrieben und verwaltet wird. Dieser Artikel untersucht im Detail, wie async und await eingesetzt werden können, um verschiedene asynchrone Situationen zu bewältigen, mit Schwerpunkt auf fortgeschrittenen Mustern und Best Practices.

• Grundlegende Konzepte von Async/Await
  • Async
  • Await
• Fortgeschrittene Verwendungsmuster
  • Parallele Ausführung
  • Await in einer Schleife
• Fehlerbehandlung mit Async/Await
  • Fehler Abfangen
• Best Practices und Tipps
• Async/Await Entmystifiziert
  • Häufige Fehler
  • Verwendung in anonymen Funktionen

Grundlegende Konzepte von Async/Await

Async

Eine als async deklarierte Funktion gibt implizit eine Promise zurück, und der von der Funktion zurückgegebene Wert wird verwendet, um diese Promise aufzulösen.

async function asynchroneOperation() {
  return 'Ergebnis';
}

// Gibt eine Promise zurück, die mit 'Ergebnis' aufgelöst wird

Await

Await wird innerhalb von async-Funktionen verwendet, um die Ausführung der Funktion anzuhalten, bis die Promise aufgelöst oder abgelehnt wird.

async function datenabrufen(url) {
  let antwort = await fetch(url);
  let daten = await antwort.json();

  return daten;
  // Die Ausführung pausiert, bis die fetch-Promise aufgelöst wird
}

Fortgeschrittene Verwendungsmuster

Parallele Ausführung

Um asynchrone Operationen parallel auszuführen, kannst du Promise.all mit await verwenden.

async function datenParallelLaden(urls) {
  let promises = urls.map((url) => fetch(url).then((res) => res.json()));
  return await Promise.all(promises);
}

Await in einer Schleife

Obwohl es generell empfohlen wird, await innerhalb von Schleifen zu vermeiden, kann es in bestimmten Fällen — etwa wenn Operationen sequenziell ablaufen müssen — notwendig sein.

async function sequenzielleVerarbeitung(urls) {
  for (let url of urls) {
    let daten = await fetch(url).then((res) => res.json());
    console.log(daten);
  }
}

Fehlerbehandlung mit Async/Await

Die Fehlerbehandlung in async-Funktionen erfolgt über try-catch-Blöcke.

Fehler Abfangen

async function datenLaden(url) {
  try {
    let antwort = await fetch(url);
    return await antwort.json();
  } catch (fehler) {
    console.error('Fehler beim Laden der Daten:', fehler);
  }
}

Best Practices und Tipps

1. Verwende Async/Await in geeigneten Kontexten: Vermeide den Einsatz von async und await bei einfachen Operationen, die nicht von der Asynchronität profitieren.
2. Vermeide unnötiges Await: Verwende await nicht bei bereits synchronen Operationen, da dies unnötige Verzögerungen einführen kann.
3. Kombiniere bei Bedarf mit Promises: In komplexen Situationen kann die Kombination von async/await mit der traditionellen Promises-API mehr Flexibilität bieten.
4. Verwende Async/Await zur Vereinfachung von asynchronem Code: Anstatt mehrere Promises mit .then() zu verketten, solltest du in Betracht ziehen, den Code mit async/await umzustrukturieren, um die Lesbarkeit zu verbessern.

Async/Await Entmystifiziert

Häufige Fehler

• await vergessen: Das Vergessen von await kann zu unerwartetem Verhalten führen, da der nachfolgende Code möglicherweise ausgeführt wird, bevor die asynchrone Operation abgeschlossen ist.
• Unbeabsichtigtes Blockieren: Der unsachgemäße Einsatz von await kann die Ausführung anderer wichtiger asynchroner Operationen blockieren.

Verwendung in anonymen Funktionen

Async/await kann auch in anonymen Funktionen verwendet werden:

document.addEventListener('click', async function () {
  let daten = await datenLaden('https://api.beispiel.com');
  console.log(daten);
});

Fazit

Async und await haben den Ansatz zur asynchronen Programmierung in JavaScript grundlegend verändert und den Code intuitiver und leichter nachvollziehbar gemacht. Zu verstehen, wie diese Konzepte effizient angewendet werden, ist für jeden Entwickler, der mit JavaScript arbeitet, unerlässlich — insbesondere in modernen Webanwendungen, die stark auf asynchrone Operationen angewiesen sind.

Happy coding!