Asynchrones Javascript mit Beispielen

von Lilly | 21.01.24 |

Javascript | Symfony Javascript Twig Ajax

Callbacks

Ein Callback ist eine Funktion, die an eine andere Funktion als Argument übergeben wird, um zu einem späteren Zeitpunkt aufgerufen zu werden, sobald eine bestimmte Aufgabe abgeschlossen ist. Dieser Mechanismus war das traditionelle Mittel, um Asynchronität in JavaScript zu bewältigen.

function ladeDaten(url, callback) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            callback(null, xhr.responseText);
        } else {
            callback(new Error('Daten konnten nicht geladen werden.'));
        }
    };
    xhr.send();
}

ladeDaten('https://api.meinserver.com/daten', function(error, data) {
    if (error) {
        console.error(error);
    } else {
        console.log(data);
    }
});

Jedoch führen Callbacks oft zu tiefer Verschachtelung und schwer lesbarem Code, was als "Callback-Hell" bekannt ist. Um dieses Problem zu entschärfen, wurden Promises eingeführt.

Promises

Promises repräsentieren das Ergebnis einer asynchronen Operation und können entweder erfüllt (resolved), abgelehnt (rejected) oder noch ausstehend (pending) sein. Ein Promise bietet Methoden wie .then() und .catch(), um das Ergebnis einer asynchronen Operation zu behandeln.

function ladeDatenAlsPromise(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.onload = () => {
            if (xhr.status === 200) {
                resolve(xhr.responseText);
            } else {
                reject(new Error('Daten konnten nicht geladen werden.'));
            }
        };
        xhr.send();
    });
}

ladeDatenAlsPromise('https://api.meinserver.com/daten')
    .then(data => console.log(data))
    .catch(error => console.error(error));

Promises helfen dabei, die Struktur des Codes flacher und lesbarer als bei der Verwendung von Callbacks zu halten.

Async/Await

Die Async/Await-Syntax ist eine elegantere Methode, um mit asynchronen Operationen zu arbeiten und basiert auf Promises. Eine Funktion kann mit dem Schlüsselwort async deklariert werden, um anzugeben, dass in ihr auf ein Promise mit dem Schlüsselwort await gewartet werden soll. Dieses Warten blockiert nicht den Haupt-Thread, sondern pausiert nur die Ausführung der async Funktion.

async function ladeDatenAsyncAwait(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Daten konnten nicht geladen werden.');
        }
        const data = await response.text();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

ladeDatenAsyncAwait('https://api.meinserver.com/daten');

Diese Syntax führt zu einem code, der dem synchronen JavaScript ähnlich sieht und leichter zu verstehen und zu warten ist.

Insgesamt haben sich die Praktiken der asynchronen Programmierung in JavaScript von einfachen Callbacks über Promises hin zu Async/Await entwickelt, wobei jede Methode ihre eigenen Vor- und Nachteile hat. Moderne JavaScript-Entwicklung bevorzugt oft Promises und die Async/Await-Syntax für bessere Lesbarkeit und einfachere Fehlerbehandlung.