05 – Asynchrone Funktionen

Promises & async / await

Lernziele dieser Lektion

• Verstehen, was asynchroner Code ist
• Promises lesen und erstellen können
• Asynchrone Funktionen mit async / await schreiben
• Fehler bei asynchronem Code behandeln

Synchron vs Asynchron

Synchroner Code wird Schritt für Schritt ausgeführt.

Asynchroner Code erlaubt es, auf langsame Operationen zu warten, ohne das Programm zu blockieren.

• Timer
• Netzwerkanfragen
• Dateizugriffe

Warum Asynchronität?

• JavaScript läuft standardmässig single-threaded
• Lange Aufgaben würden die Oberfläche blockieren
• Asynchroner Code sorgt für reaktive Anwendungen

Promises – Grundidee

Ein Promise steht für einen Wert, der jetzt noch nicht verfügbar ist.

• Erfüllt (fulfilled)
• Abgelehnt (rejected)
• Ausstehend (pending)

Ein einfaches Promise

const promise = new Promise((resolve, reject) => {
    resolve("Fertig!");
});
    

Promise verwenden

promise.then(result => {
    console.log(result);
});
    

then wird ausgeführt, wenn das Promise erfolgreich ist.

Promise mit Fehler

const promise = new Promise((resolve, reject) => {
    reject("Etwas ist schiefgelaufen");
});
    

Fehler behandeln

promise
    .then(result => console.log(result))
    .catch(error => console.error(error));
    

Komplettbeispiel

        
            const addAsync = (a,b) => {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        if(isNaN(a) || isNaN(b)) {
                            reject('Error: a or b is not a Number!');
                        } else {
                            resolve(a + b);
                        }
                    }, 1000);
                })
            }
        
    

        
            console.log("Before");

            addAsync(3, 4).then(res => {
                console.log(`It worked! The result is: ${res}`);
            }).catch(err => {
                console.log(`An error occured: ${err}`); 
            });

            console.log("After");
        
    

Warum async / await?

Promises funktionieren, sind aber oft schwer lesbar.

async / await macht asynchronen Code lesbarer.

Asynchrone Funktion

async function loadData() {
    return "Daten geladen";
}
    

Eine async-Funktion gibt immer ein Promise zurück.

await verwenden

async function example() {
    const result = await promise;
    console.log(result);
}
    

await pausiert die Funktion, nicht das gesamte Programm.

Fehler mit try / catch

async function example() {
    try {
        const result = await promise;
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}
    

TL;DR

• Asynchroner Code blockiert das Programm nicht
• Promises repräsentieren zukünftige Werte
• async / await vereinfacht Promises
• Fehler müssen explizit behandelt werden