Heim >Web-Frontend >js-Tutorial >JavaScript-Versprechen verstehen: Ein Leitfaden für Anfänger

JavaScript-Versprechen verstehen: Ein Leitfaden für Anfänger

PHPz
PHPzOriginal
2024-08-29 12:10:43374Durchsuche

Understanding JavaScript Promises: A Beginner’s Guide

JavaScript ist eine leistungsstarke Sprache, die häufig für die Webentwicklung verwendet wird, und eines der wesentlichen Konzepte, die es im modernen JavaScript zu verstehen gilt, sind Promises. Wenn Sie jemals Probleme mit asynchronem Code oder Rückrufen hatten oder einfach nur saubereren, besser lesbaren Code schreiben möchten, ist das Verständnis von Promises ein Muss. In diesem Beitrag gehen wir näher darauf ein, was Promises sind, wie sie funktionieren und wie Sie sie nutzen können, um asynchrone Vorgänge effektiver abzuwickeln.

Was sind Versprechen?

In JavaScript ist ein Promise ein Objekt, das den eventuellen Abschluss (oder Misserfolg) einer asynchronen Operation und den daraus resultierenden Wert darstellt. Es ist wie ein Platzhalter für einen zukünftigen Wert, der aufgelöst wird, sobald der Vorgang abgeschlossen ist.

Promises stellen eine deutliche Verbesserung gegenüber herkömmlichem Callback-basierten asynchronen Code dar, der aufgrund seiner tief verschachtelten Struktur und der Schwierigkeit bei der Verwaltung oft als „Callback-Hölle“ bezeichnet wird.

Wie funktionieren Versprechen?

Ein Versprechen kann einen von drei Zuständen haben:

  1. Ausstehend: Der Anfangszustand, in dem das Versprechen weder erfüllt noch abgelehnt wird.
  2. Erfüllt: Der Zustand, in dem der Vorgang erfolgreich abgeschlossen wurde und das Versprechen mit einem Wert aufgelöst wird.
  3. Abgelehnt: Der Zustand, in dem der Vorgang fehlschlägt und das Versprechen mit einem Grund (z. B. einem Fehler) abgelehnt wird.
let myPromise = new Promise((resolve, reject) => {
    let success = true; // Simulating an operation

    if (success) {
        resolve("The operation was successful!");
    } else {
        reject("The operation failed.");
    }
});

myPromise.then((message) => {
    console.log(message); // This will run if the Promise is fulfilled
}).catch((error) => {
    console.error(error); // This will run if the Promise is rejected
});

Im obigen Beispiel wird „myPromise“ aufgelöst, wenn die Variable „success“ „true“ ist, und „reject“, wenn sie „false“ ist. Die Methode „.then()“ wird verwendet, um den erfüllten Status zu behandeln, und „.catch()“ wird verwendet, um etwaige Fehler zu behandeln.

Versprechen verketten

Eine der mächtigsten Funktionen von Promises ist, dass Sie sie miteinander verketten können. Dadurch können Sie mehrere asynchrone Vorgänge nacheinander ausführen, ohne in die Callback-Hölle zu geraten.

myPromise
    .then((message) => {
        console.log(message);
        return new Promise((resolve, reject) => {
            resolve("Another operation completed!");
        });
    })
    .then((newMessage) => {
        console.log(newMessage);
    })
    .catch((error) => {
        console.error(error);
    });

In diesem Beispiel wird das zweite „.then()“ ausgeführt, nachdem das erste Versprechen erfüllt wurde, was einen reibungslosen, lesbaren Ablauf asynchroner Vorgänge ermöglicht.

Umgang mit mehreren Versprechen

Manchmal müssen Sie warten, bis mehrere asynchrone Vorgänge abgeschlossen sind. Hier kommen „Promise.all()“ und „Promise.race()“ zum Einsatz.

Promise.all()

Diese Methode nimmt ein Array von Versprechen und gibt ein einzelnes Versprechen zurück, das aufgelöst wird, wenn alle Versprechen im Array aufgelöst wurden, oder ablehnt, wenn eines der Versprechen abgelehnt wird.

let promise1 = Promise.resolve("First operation");
let promise2 = Promise.resolve("Second operation");

Promise.all([promise1, promise2]).then((values) => {
    console.log(values); // ["First operation", "Second operation"]
});

Promise.race()

Promise.race() akzeptiert ebenfalls ein Array von Versprechen, gibt jedoch ein Versprechen zurück, das aufgelöst oder abgelehnt wird, sobald eines der Versprechen im Array aufgelöst oder abgelehnt wird.

let promise1 = new Promise((resolve) => setTimeout(resolve, 500, "First operation"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Second operation"));

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "Second operation"
});

Abschluss

Promises sind zu einem Eckpfeiler der asynchronen Programmierung in JavaScript geworden und ermöglichen es Entwicklern, saubereren und besser verwaltbaren Code zu schreiben. Wenn Sie verstehen, wie Sie mehrere Promises erstellen, verketten und verarbeiten, sind Sie auf dem besten Weg, asynchrones JavaScript zu beherrschen.

Wenn Sie neu bei Promises sind, hoffe ich, dass dieser Leitfaden Ihnen den Einstieg erleichtert. Wenn Sie mehr üben, werden Sie feststellen, dass Promises ein unschätzbar wertvolles Werkzeug in Ihrem JavaScript-Toolkit ist.

Teilen Sie gerne Ihre Gedanken mit oder stellen Sie Fragen in den Kommentaren. Lasst uns Jungs verbinden und eine starke Community aufbauen.

Das obige ist der detaillierte Inhalt vonJavaScript-Versprechen verstehen: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn