Async/Await

Sie kennen nun Promises und then() als Art mit Asynchronität umzugehen.

Nun lernen wir eine zweite Schreibweise für Promises.

await statt then

Bei der Verwendung von await braucht man keine Callback-Funktionen oder Arrow-Funktionen mehr - der Code sieht wieder aus wie synchroner Code:

<script type="module">
  const response = await fetch("counter.php");
  const counter = await response.text();

  let p = document.createElement("p");
  p.innerHTML = `Zugriffe auf diese Seite: <b>${counter}</b>`;
  document.querySelector("body").appendChild(p);
</script>

Was bedeutet await?

Das keyword await wird auf eine promise angewandt:

  const promise = fetch("counter_ajax.php");
  const response = await promise;

await wartet nicht aktiv auf das Ergebnis. Stattdessen wird die Ausführung des aktuellen Javascript Programmes an dieser Stelle pausiert, und in der Zwischenzeit kann anderer JavaScript-Code ausgeführt werden.

Wenn der andere Code fertig ausgeführt ist, und das Ergebnis der Promise verfügbar ist, läuft das pausierte Programm weiter und übernimmt den Rückgabewert.

Das bedeutet: Die Aussage: “Ein Javascript Programm wird nie unterbrochen”. stimmt so nicht mehr. An jeder Stelle mit await kann die Ausführung unterbrochen werden – und in der Zeit kann ein anderes JavaScript-Programm laufen.

async await und Fehlerbehandlung.

Bei Promises mussten wir die .catch Methode ans Ende der .then Chain anhängen um einen Fehler abzufangen.

Mit async/await können wir wieder die “normale” try catch Schreibweise verwenden:

try {
  const response = await fetch("counter.php");
  const counter = await response.text();

  let p = document.createElement("p");
  p.innerHTML = `Zugriffe auf diese Seite: <b>${counter}</b>`;
  document.querySelector("body").appendChild(p);
} catch (error) {
  console.error("Fehler beim Laden des Zählers:", error);
}

Await und Reihenfolge

Mit await ist nun die Reihenfolge, in der die Befehle ausgeführt werden, wieder wie erwartet

Demo

Warnhinweis

Im Browser kann man await direkt im Hauptteil eines JavaScript-Moduls verwenden. Innerhalb einer Funktion funktioniert await aber nur, wenn die Funktion mit dem Schlüsselwort async markiert ist

async function f1() {
  console.log("ich kann await");
}

function f2() {
  console.log("ich kann kein async und kein await");
}

Auch anonyme Funktionen und Arrow Functions können async sein:

const f1 = async () => {
  console.log("ich kann await");
}

const f2 = () => {
  console.log("ich kann kein async und kein await");
}

Beispiel: DOMContentLoaded

document.addEventListener('DOMContentLoaded', async () => {
  const response = await fetch("counter.php");
});

Siehe auch

• MDN: await