Detaillierte Erklärung von Promises in JavaScript

Detaillierte Erklärung von Promises in JavaScript

Promise ist eine Lösung für asynchrone Programmierung. Es ist ein Objekt, das Nachrichten von asynchronen Vorgängen abrufen kann. Es verbessert die Schwierigkeiten der asynchronen Programmierung erheblich und vermeidet die Callback-Hölle. Es ist vernünftiger und leistungsfähiger als herkömmliche Lösungen wie Callback-Funktionen und Ereignisse.

Syntaktisch ist ein Promise ein Objekt, das Nachrichten von asynchronen Operationen empfangen kann. Bietet eine einheitliche API, sodass verschiedene asynchrone Vorgänge auf die gleiche Weise gehandhabt werden können

1. Promise-Instanzen haben drei Zustände:

(1) Ausstehend

(2) Gelöst

(3) Abgelehnt

2. Promise-Instanzen haben zwei Prozesse

(1) ausstehend > erfüllt: gelöst

(2) pending > rejected: Abgelehnt

Hinweis: Sobald sich der Status von „Kauf und Verkauf“ zu einem anderen Status ändert, kann er nicht mehr geändert werden.

Grundlegende Verwendung von Promise:

1. Erstellen Sie ein Promise-Objekt

Das Promise-Objekt stellt eine asynchrone Operation dar und hat drei Zustände: ausstehend (in Bearbeitung), erfüllt (erfolgreich) und abgelehnt (fehlgeschlagen).

Der Promise-Konstruktor akzeptiert eine Funktion als Parameter, deren beiden Parameter „resolve“ und „reject“ sind.

2. Promise-Methode

Promise hat fünf gängige Methoden:

(1)dann()

Die then-Methode kann zwei Callback-Funktionen als Parameter erhalten. Die erste Callback-Funktion wird aufgerufen, wenn sich der Status des Promise-Objekts in „Resolved“ ändert, und die zweite Callback-Funktion wird aufgerufen, wenn sich der Status des Promise-Objekts in „Rejected“ ändert. Der zweite Parameter kann weggelassen werden.

lass versprechen = neues Versprechen((lösen, ablehnen)=>{
    ajax('erste').Erfolg(Funktion(res){
        Entschlossenheit (res);
    })
})
versprechen.dann(res=>{
    gib ein neues Versprechen zurück ((Auflösen,Ablehnen)=>{
        ajax('Sekunde').Erfolg(Funktion(Res){
            Entschlossenheit (res)
        })
    })
}).dann(res=>{
    gib ein neues Versprechen zurück ((Auflösen,Ablehnen)=>{
        ajax('Sekunde').Erfolg(Funktion(Res){
            Entschlossenheit (res)
        })
    })
}).dann(res=>{
 })

(2) fangen ()

Diese Methode entspricht dem zweiten Parameter der then-Methode und verweist auf die Reject-Callback-Funktion.

Eine weitere Funktion besteht darin, dass bei der Ausführung der Resolve-Callback-Funktion, wenn ein Fehler auftritt und eine Ausnahme ausgelöst wird, die Ausführung nicht gestoppt wird, sondern in die Catch-Methode wechselt.

p.then((Daten) => {
     console.log('gelöst',Daten);
},(err) => {
     console.log('abgelehnt',Fehler);
     }
); 
p.then((Daten) => {
    console.log('gelöst',Daten);
}).catch((err) => {
    console.log('abgelehnt',Fehler);
});

(3) alle()

Die Methode all kann Aufgaben abschließen und ausführen. Sie empfängt ein Array und jedes Element im Array ist ein Promise-Objekt. Wenn alle Promise-Zustände im Array aufgelöst sind, wird der Zustand aller Methoden aufgelöst, falls ein Zustand abgelehnt wird. Der Status aller Methoden ändert sich dann zu „Abgelehnt“.

JavaScript
let promise1 = neues Versprechen((lösen, ablehnen)=>{
	setzeTimeout(()=>{
       Entschlossenheit (1);
	},2000)
});
let promise2 = neues Versprechen((lösen, ablehnen)=>{
	setzeTimeout(()=>{
       Entschlossenheit (2);
	},1000)
});
let promise3 = neues Versprechen((lösen, ablehnen)=>{
	setzeTimeout(()=>{
       Entschlossenheit (3);
	},3000)
});
Versprechen.alle([Versprechen1,Versprechen2,Versprechen3]).dann(res=>{
    konsole.log(res);
    //Das Ergebnis ist: [1,2,3] 
})

(4) empfangen()

Die Empfangsmethode ist dieselbe wie bei allen und der empfangene Parameter ist ein Array von Promises. Im Gegensatz zu allen wird jedoch bei Ausführung des ersten Ereignisses der Wert des Promise-Objekts direkt zurückgegeben.

Die eigentliche Funktion von rece: Wenn Sie etwas tun möchten, aber nach langer Zeit aufgeben, können Sie das Problem mit dieser Methode lösen.

Versprechen.race([Versprechen1, TimeOutPromise(5000)]).dann(res=>{})

(5) schließlich()

Mit der Finally-Methode wird eine Operation angegeben, die unabhängig vom Endzustand des Promise-Objekts ausgeführt wird. (Diese Methode wurde im ES2018-Standard eingeführt)

versprechen
.dann(Ergebnis => {···})
.catch(Fehler => {···})
.finally(() => {···});

Die Callback-Funktion der Finally-Methode akzeptiert keine Parameter, d. h. es besteht keine Möglichkeit herauszufinden, ob der vorherige Promise-Status erfüllt oder abgelehnt wurde.

versprechen
.finally(() => {
  // Anweisungen });
// entspricht Versprechen
.Dann(
  Ergebnis => {
    // Anweisung gibt Ergebnis zurück;
  },
  Fehler => {
    //Anweisung löst Fehler aus;
  }
);

Wenn im obigen Code die Finally-Methode nicht geschrieben ist, muss die gleiche Anweisung sowohl für den Erfolg als auch für den Fehler einmal geschrieben werden. Mit der finally-Methode müssen Sie es nur einmal schreiben

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Ein tiefer Einblick in JavaScript-Promises
  • Front-End-JavaScript-Versprechen
  • Fragen zum Vorstellungsgespräch zu JS 9 Promise
  • So fügen Sie in JS eine Abbruchfunktion zu einem Versprechen hinzu
  • Verstehen Sie das Versprechen von JavaScript gründlich

<<:  Zusammenfassung von 4 Methoden des Div+CSS-Layouts, um eine 2-Enden-Ausrichtung von CSS zu erreichen

>>:  Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Artikel empfehlen

So verstecken Sie RAR-Dateien in Bildern

Sie können dieses Logo lokal als .rar-Datei speic...

HTML-Code für Multiheader-Tabellen

1. Code der Multiheader-Tabelle Code kopieren Der ...

TypeScript-Aufzählungstypen im Detail erklären

Inhaltsverzeichnis 1. Digitale Aufzählung 2. Zeic...

Schreiben von Methoden, die in nativem JS verboten sein sollten

Inhaltsverzeichnis Funktionen auf Blockebene Ände...

Best Practices für die Entwicklung von Amap-Anwendungen mit Vue

Inhaltsverzeichnis Vorwort Asynchrones Laden Pake...

Natives js zur Realisierung der Bild-Upload-Steuerung

In diesem Artikelbeispiel wird der spezifische Co...

Vue ruft die PC-Kamera auf, um die Fotofunktion zu realisieren

In diesem Artikelbeispiel wird der spezifische Co...

Beispiel für die MySQL-Volltext-Fuzzy-Suche nach der Methode MATCH AGAINST

MySQL 4.x und höher bieten Unterstützung für die ...