async / await

async/await ist eine modernere Schreibweise, um mit Promises zu arbeiten. Der Code sieht dabei fast so aus wie normaler, synchroner Code – ist aber weiterhin asynchron. Das macht ihn leichter lesbar als lange then()-Ketten.

Unter der Haube arbeitet async/await weiterhin mit Promises. Die Grundlagen dazu kennst du aus dem Kapitel Promises.

Was sind async und await?

async markiert eine Funktion als asynchron. Sie gibt automatisch ein Promise zurück.

await wartet innerhalb einer async-Funktion auf das Ergebnis eines Promises – und gibt dir den Wert direkt zurück, ohne then().

await darf nur innerhalb von async-Funktionen verwendet werden.

await verwenden

Vergleiche die Schreibweise mit then() aus dem Promises-Kapitel:

Mit then():

1function datenLaden() {
2    return new Promise(function(resolve, reject) {
3        setTimeout(function() {
4            resolve({ name: "Anna", alter: 25 });
5        }, 1000);
6    });
7}
8
9datenLaden()
10    .then(function(user) {
11        console.log(user.name);
12        console.log(user.alter);
13    });

Mit await:

1function datenLaden() {
2    return new Promise(function(resolve, reject) {
3        setTimeout(function() {
4            resolve({ name: "Anna", alter: 25 });
5        }, 1000);
6    });
7}
8
9async function userAnzeigen() {
10    const user = await datenLaden();
11    console.log(user.name);
12    console.log(user.alter);
13}
14
15userAnzeigen();

Beide Varianten machen dasselbe – await liest sich aber deutlich verständlicher, besonders wenn mehrere asynchrone Schritte hintereinander kommen.

async Funktionen

Jede Funktion mit dem Schlüsselwort async gibt ein Promise zurück – auch wenn du kein await verwendest:

1async function begruessung() {
2    return "Hallo!";
3}
4
5begruessung().then(function(text) {
6    console.log(text);
7});

return "Hallo!" in einer async-Funktion ist dasselbe wie return Promise.resolve("Hallo!").

Fehler mit try/catch

Statt catch() an ein Promise zu hängen, kannst du bei async/await den gewohnten try/catch-Block verwenden – wie bei synchronem Code:

1function datenLaden() {
2    return new Promise(function(resolve, reject) {
3        setTimeout(function() {
4            resolve({ name: "Anna", alter: 25 });
5        }, 1000);
6    });
7}
8
9async function datenHolen() {
10    try {
11        const user = await datenLaden();
12        console.log(user.name);
13    } catch (fehler) {
14        console.log("Fehler:", fehler);
15    }
16}
17
18datenHolen();

Schlägt das Promise fehl (z. B. durch reject()), springt die Ausführung in den catch-Block – genau wie bei catch() bei Promises.

Kurz gesagt: async macht eine Funktion asynchron, await wartet auf Promises in lesbarer Form. Fehler fängst du mit try/catch ab. Im nächsten Kapitel nutzt du async/await mit fetch, um echte Daten aus dem Internet zu laden.