Die Handhabung asynchroner Vorgänge in JavaScript ist für die Erstellung effizienter und flüssiger Anwendungen unerlässlich. Hier kommen Versprechen ins Spiel. Haben Sie sich jemals gefragt, wie Sie verhindern können, dass Ihr Code blockiert, während Sie auf eine Antwort von einem Server warten? Oder wie können Sie bestimmte Aufgaben erst ausführen, nachdem eine andere abgeschlossen ist? Nun, Versprechen in JavaScript sind die Lösung, nach der Sie gesucht haben.

In diesem Artikel untersuchen wir, was Versprechen sind, wie sie funktionieren und wie sie den Ablauf Ihrer App verbessern können. Lassen Sie uns in die Details eintauchen.

Was ist ein Versprechen in JavaScript?

Ein Versprechen in JavaScript ist ein Objekt, das den eventuellen Abschluss (oder Fehler) einer asynchronen Operation und den daraus resultierenden Wert darstellt. Mit anderen Worten, ein Versprechen ist ein Vermittler, der die asynchrone Codeausführung übernimmt und es Ihnen ermöglicht, mit Werten zu arbeiten, die zum Zeitpunkt des Schreibens des Codes noch nicht bekannt sind.

Hauptmerkmale von Versprechen:

• Ausstehend: Der Anfangszustand, in dem der asynchrone Vorgang noch nicht abgeschlossen ist.
• Gelöst (erfüllt): Der asynchrone Vorgang wurde erfolgreich abgeschlossen und es wurde ein Ergebnis erhalten.
• Abgelehnt: Der asynchrone Vorgang ist fehlgeschlagen und es wird ein Grund oder Fehler angegeben.

Dieser Lebenszyklus eines Versprechens ermöglicht eine klarere und effizientere Handhabung asynchroner Vorgänge und vermeidet so die „Callback-Hölle“.

Warum Versprechen verwenden?

Promises sind besonders nützlich, wenn mit Anfragen an Server gearbeitet wird. Stellen Sie sich vor, Sie stellen eine HTTP-Anfrage, um Daten abzurufen. Die Wartezeit kann variieren und Sie möchten nicht, dass Ihre Anwendung einfriert, während die Antwort eintrifft. Durch die Verwendung von Versprechen kann Ihr Code ohne Wartezeit weiter ausgeführt werden, was die Gesamtleistung Ihrer Anwendung verbessert.

Darüber hinaus gelten Versprechen auch in anderen Fällen, wie zum Beispiel:

• Dateimanipulation: Sie können warten, bis eine Datei hochgeladen oder verarbeitet wurde, bevor Sie eine andere Aufgabe ausführen.
• DOM-Änderungen: Wenn Sie sicherstellen müssen, dass bestimmte Schnittstellenänderungen abgeschlossen sind, bevor Sie mit anderen Vorgängen fortfahren.

Promises ermöglichen es Ihnen auch, mehrere asynchrone Vorgänge auf eine besser lesbare und wartbare Weise zu verketten.

So verwenden Sie Versprechen in JavaScript

Um ein Versprechen zu erstellen, wird der Promise-Konstruktor verwendet, der eine Funktion mit zwei Argumenten übergibt: Auflösung und Ablehnung.

let miPromesa = new Promise((resolve, reject) => {
    // Simulación de una operación asíncrona
    let exito = true;

    if (exito) {
        resolve("Operación exitosa!");
    } else {
        reject("Ocurrió un error.");
    }
});

Um das Ergebnis eines Versprechens zu verarbeiten, werden die Methoden .then() und .catch() verwendet:

miPromesa
    .then((mensaje) => {
        console.log(mensaje); // "Operación exitosa!"
    })
    .catch((error) => {
        console.error(error); // "Ocurrió un error."
    });`

Vorteile von Versprechen gegenüber Rückrufen

Bevor Versprechen eingeführt wurden, erfolgte die Abwicklung asynchroner Vorgänge hauptsächlich über Rückrufe. Dies könnte jedoch zu Code führen, der schwer zu befolgen und zu warten war, insbesondere wenn mehrere Rückrufe verschachtelt waren, was als „Callback-Hölle“ bekannt ist.

Vorteile von Versprechen:

• Lesbarkeit: Der Code ist leichter zu lesen und zu befolgen.
• Wartung: Erleichtert die Identifizierung und Behandlung von Fehlern.
• Verkettung: Sie können mehrere asynchrone Vorgänge auf organisiertere Weise verketten.

Versprechen vs. Async/Await

Obwohl Versprechen eine deutliche Verbesserung gegenüber Rückrufen darstellen, hat die Einführung von async/await in ECMAScript 2017 die Syntax für die Handhabung asynchroner Vorgänge weiter vereinfacht.

async function obtenerDatos() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

Mit async/await wird der Code linearer, ähnlich wie synchroner Code, ist aber unter der Haube immer noch asynchron. Es ist jedoch wichtig zu beachten, dass async/await im Kern immer noch Versprechen verwendet. Daher ist es wichtig zu verstehen, wie Versprechen funktionieren, um die Verwendung von async/await zu beherrschen.

Abschluss

Promises in JavaScript sind ein leistungsstarkes Tool zur Handhabung asynchroner Vorgänge, ohne Ihren Code durch mehrere Rückrufe zu komplizieren. Von Anfragen an Server bis hin zu komplexeren Aufgaben innerhalb Ihrer Anwendung ermöglichen Ihnen Versprechen, saubereren, besser lesbaren und einfacher zu wartenden Code zu schreiben.

Ganz gleich, ob Sie eine einfache Webanwendung oder ein komplexeres System erstellen: Um die Leistung Ihres Codes zu optimieren, ist es wichtig zu lernen, wie man mit Versprechen umgeht.