Populäre Erklärung, was Versprechen ist

Was ist Versprechen?

Versprechen Englische Übersetzung bedeutet Versprechen, Versprechen. Seine Funktion ist wie die chinesische Bedeutung, es ist ein Versprechen.

Erklärung von MDN: Das
Promise-Objekt ist ein Proxy-Objekt (Proxy-Wert), und der Wert des Proxy-Objekts ist möglicherweise unbekannt, wenn das Promise-Objekt erstellt wird. Sie können entsprechende Verarbeitungsmethoden (Handler) für den Erfolg und Misserfolg asynchroner Vorgänge binden. Auf diese Weise können asynchrone Methoden Werte wie synchrone Methoden zurückgeben. Anstatt das endgültige Ausführungsergebnis sofort zurückzugeben, handelt es sich um ein Versprechungsobjekt, das zukünftige Ergebnisse darstellen kann.

Nachdem ich so viel gesagt habe, bedeutet dies tatsächlich eine Umgangssprache:
1. Die Schwiegertochter hat Hunger und muss essen, deshalb möchte ich auf die Straße gehen, um Lebensmittel zu kaufen ( asynchrone Methode ).
2. Sie weiß nicht wann Ich werde nach dem Kauf des Lebensmittels zurückkommen (die asynchrone Methode wird einige Sekunden lang ausgeführt ).
3. Aber nachdem ich das Lebensmittel gekauft und nach Hause zurückgekehrt bin, mache ich meiner Schwiegertochter geschmorte Schweinerippchen zum Essen ( nach dem Wenn eine asynchrone Methode ausgeführt wird, muss der Rückgabewert verarbeitet werden .
Was soll ich zu diesem Zeitpunkt tun? Ich werde ein Versprechen verwenden:
Sag einfach dieses Ding. Gib es mir. Ich verspreche, dass ich einkaufen gehen werde. Ich werde dich schmoren lassen Schweinerippchen, sobald ich mit dem Kauf fertig bin, und ich werde Sie anrufen, um es zu essen, sobald es fertig ist (dieser Ort entspricht einem Versprechen- Kettenruf). Was machen Sie jetzt? Sie können mit Douyin spielen ( tut es) den Aufruf anderer Codes nicht beeinflussen ).

Ein Versprechen hat die folgenden Zustände:
ausstehend: Anfangszustand, weder ein erfolgreicher noch ein fehlgeschlagener Zustand (ich ging aus, um Lebensmittel zu kaufen, Sie warten darauf, dass ich zurückkomme)
erfüllt: bedeutet, dass die Operation erfolgreich abgeschlossen wurde. (Nachdem Sie das Essen gekauft haben, gehen Sie nach Hause und sagen Sie meiner Schwiegertochter, dass ich das Essen habe, das Sie essen möchten.)
Abgelehnt: Dies bedeutet, dass die Operation fehlgeschlagen ist. (Ich habe kein Essen bekommen, warum bestellst du nicht ein Essen zum Mitnehmen?)

Ein Promise-Objekt im ausstehenden Zustand kann in einen erfüllten Zustand wechseln und einen Wert an die entsprechende Zustandsverarbeitungsmethode übergeben, oder es kann in einen fehlgeschlagenen Zustand (abgelehnt) wechseln und Fehlerinformationen übergeben. In beiden Fällen werden die an die then-Methode des Promise-Objekts gebundenen Handler aufgerufen.
Die then-Methode enthält zwei Parameter: onfulfilled und onrejected, die beide vom Typ Function sind. Wenn der Promise-Status erfüllt ist, wird die onfulfilled-Methode von then aufgerufen, und wenn der Promise-Status abgelehnt wird, wird die onrejected-Methode von then aufgerufen, sodass kein Wettbewerb zwischen dem Abschluss der asynchronen Operation und der Bindungsverarbeitungsmethode besteht.
Fügen Sie hier eine Bildbeschreibung ein

Schauen Sie sich ein einfaches Beispiel an:

            new Promise((resolve, reject) => {
                console.log('code begin !');
                 let num = 4;
                // 假装执行一个异步方法
                setTimeout(() => {
                    console.log('async begin !');
                    num += 2;
                    // 把Promise状态设为fulfilled,并把结果传递出去
                    resolve(num);
                    // 把Promise状态设为rejected,并把失败信息传递出去
                    //reject('promise被手动中止');
                    // throw 'uncaught exception!'; // 这里要注意,catch无法捕获在异步方法里抛出的异常
                }, 1000);
            }).then((result) => { // 当Promise的状态被设为接受(fulfilled)时执行
                console.log('fulfilled :' + result);
            }, (reason) => { // 当Promise的状态被设为拒绝(rejected)时执行
                console.log('rejected :' + reason);
            }).catch((error) => { 
                console.log('error :' + error);
            }).finally(() => {
                // do something !
            });
                

Die then-Methode gibt ein Versprechen zurück. Es erfordert höchstens zwei Parameter: die Rückruffunktion für den Erfolg und Misserfolg des Versprechens.

Die catch-Methode wird ausgeführt, wenn im Ausführungsprozess eine Ausnahme auftritt oder der Promise-Status auf fehlgeschlagen (abgelehnt) gesetzt ist und die abgelehnte Ausführungsfunktion nicht festgelegt ist. Darüber hinaus kann catch keine Ausnahmen abfangen, die in asynchronen Methoden ausgelöst werden

Die finally-Methode kann den endgültigen Status des Versprechens nicht kennen, daher empfängt die finally-Rückruffunktion keine Parameter. Sie wird nur bei der Ausführung verwendet, unabhängig vom endgültigen Ergebnis.

Außerdem können Promises in einer Kette aufgerufen werden. Wenn die Ausführung der then-Methode endet und ein neues Promise zurückgegeben wird, werden die then-Methoden nacheinander ausgeführt. Beachten Sie jedoch Folgendes: Wenn in der Anrufkette eine Ausnahme auftritt oder der Status in "Zurückgewiesen" geändert wird, wird der Rest der Anrufkette nicht ausgeführt. Seien Sie also vorsichtig, wenn Sie Kettenrufe verwenden!

Codebeispiel:

            new Promise((resolve, reject) => {
                console.log('code begin !');
                let num = 4;
                setTimeout(() => {
                    console.log('num + 2 = 6');
                    num += 2;
                    resolve(num);
                }, 1000);
            }).then((num) => {
                return new Promise((resolve, reject) => {
                    console.log('num * num = 36');
                    setTimeout(() => {
                        num *= num;
                        resolve(num);
                    }, 1000);
                });
            }).then((num) => {
                return new Promise((resolve, reject) => {
                    console.log('num + num = 72');
                    setTimeout(() => {
                        num += num;
                        resolve(num);
                    }, 1000);
                });
            }).then((result) => {
                console.log('fulfilled :' + result);
            }, (reason) => {
                console.log('rejected :' + reason);
            }).catch((error) => {
                console.log('error :' + error);
            }).finally(() => {
                // do something !
            });

Fügen Sie hier eine Bildbeschreibung ein
Promise verfügt über einige andere Methoden wie Promise.all ( iterable ): Sie können eine iterable (ähnlich einem Array) übergeben. Sie wartet darauf, dass alle Versprechen in der iterable ausgeführt werden, und gibt sie einheitlich zurück . Das zurückgegebene Ergebnis ist ebenfalls ein Array, das folgen wird Die Reihenfolge der Versprechen innerhalb der Parameter wird nicht durch die Reihenfolge bestimmt, in der die Versprechen aufgerufen werden.

	    Promise.all([mothod1(), mothod2()])
	         .then((result) => {
	             console.log('all complete');
	             console.log(result);
	         });
                
       function mothod1() {
            console.log('first mothod');
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('mothod1 complete');
                }, 2000);
            });
        }
        function mothod2() {
            console.log('second mothod');
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('mothod2 complete');
                }, 1000);
            });
        }

Fügen Sie hier eine Bildbeschreibung ein

Promise.race ( iterable ): Sie können ein iterable (ähnlich einem Array) übergeben. Sobald ein Versprechen in der iterable aufgelöst oder abgelehnt wurde, wird das Versprechen aufgelöst oder abgelehnt.

			Promise.race([mothod1(), mothod2()])
                .then((result) => {
                    console.log(result);
                    console.log('complete');
                });

Fügen Sie hier eine Bildbeschreibung ein

Ich denke du magst

Origin blog.csdn.net/qq_41885871/article/details/103735447
Empfohlen
Rangfolge