Detaillierte Einführung in die Wissenspunkte zu Versprechen in js

亚连
Freigeben: 2018-06-08 10:57:49
Original
1388 Leute haben es durchsucht

Jetzt werde ich mit Ihnen eine kurze Diskussion über die Verwendung von js Promise teilen. Es hat einen sehr guten Referenzwert und Sie werden ihn verstehen, nachdem Sie diesen Artikel gelesen haben. Ich hoffe, es hilft allen.

1. Hintergrund

Jeder weiß, dass NodeJS so schnell ist Prozessereignisse, auf die gewartet werden muss, ermöglichen die weitere Ausführung des Codes, ohne irgendwo warten zu müssen. Es gibt jedoch auch einen Nachteil. Wenn wir beispielsweise viele Rückrufe ausführen, müssen wir den nächsten Rückruf ausführen und dann den nächsten Rückruf ausführen. Dies führt zu einer Verschachtelung und zu unklarem Code, was sehr schwierig ist . Es ist leicht, in das „Rückrufgefängnis“ zu gelangen, was leicht zu folgendem Beispiel führen kann:

async(1, function(value){ async(value, function(value){ async(value, function(value){ async(value, function(value){ async(value, function(value){ async(value, final); }); }); }); }); });
Nach dem Login kopieren

Diese Schreibweise lässt die Leute zusammenbrechen. Gibt es also eine Möglichkeit, dieses Problem zu lösen? irgendeine andere Art zu schreiben? Die Antwort lautet: Ja. Das neue Versprechensobjekt von es6 und das asynchrone Warten von es7 können dieses Problem lösen. Natürlich wird das Versprechensobjekt hier zuerst vorgestellt und das asynchrone Warten von es7 wird in den folgenden Artikeln geteilt. Das Promise-Objekt wird im Folgenden vorgestellt.

2. Einführung

Promise ist ein Objekt, das zur Verarbeitung asynchroner Vorgänge verwendet wird und es uns ermöglicht, asynchrone Aufrufe zu schreiben zu schreiben, schöner und leichter zu lesen. Wie der Name schon sagt, bedeutet es Versprechen, was bedeutet, dass er uns nach der Verwendung von Promise auf jeden Fall eine Antwort gibt. Unabhängig davon, ob es erfolgreich ist oder nicht, wird er uns eine Antwort geben, sodass wir uns keine Sorgen machen müssen, dass er wegläuft weg, haha. Daher hat Promise drei Zustände: ausstehend (in Bearbeitung), gelöst (abgeschlossen) und abgelehnt (fehlgeschlagen). Nur asynchron zurückgegebene Strukturen können ihren Zustand ändern. Daher gibt es im Allgemeinen nur zwei Versprechensprozesse: ausstehend – >gelöst oder ausstehend – >abgelehnt.

Das Promise-Objekt verfügt auch über eine häufiger verwendete Then-Methode, mit der die Callback-Funktion ausgeführt wird. Die Then-Methode akzeptiert zwei Parameter, der erste ist ein erfolgreich aufgelöster Callback, der andere ist ein fehlgeschlagener abgelehnter Callback. und der zweite optionale Rückrufparameter für Fehler. Und die then-Methode kann auch ein Promise-Objekt zurückgeben, sodass es in einer Kette aufgerufen werden kann. Als nächstes der Code:

var Pro = function (time) { //返回一个Promise对象 return new Promise(function (resolve, reject) { console.log('123'); //模拟接口调用 setTimeout(function () { //这里告诉Promise 成功了,然后去执行then方法的第一个函数 resolve('成功返回'); }, time); }) }; (function(){ console.log('start'); Pro(3000) .then(function(data){ console.log(data); return Pro(5000);}) .then(function(data){ console.log(data); console.log('end'); }) })();
Nach dem Login kopieren

Im obigen Code wird eine Pro-Variable definiert und ihr dann eine anonyme Funktion zugewiesen. Die Funktion gibt ein Promise-Objekt zurück und empfängt dann eine Funktion im Objekt verwendet die Methoden „resolve“ und „reject“. Wenn die Parameter übergeben werden, wird setTimeOut verwendet, um eine asynchrone Anfrage zu simulieren. Wenn die Methode „resolve“ ausgeführt wird, wird eine Funktion der Methode „then“ aufgerufen. Die Ergebnisse lauten wie folgt:

3. Promise API

1.
2. Promise.reject()
3. Promise.prototype.then()
4. Promise.all() Äquivalent zu und
6. Promise.race() // Vervollständigen Sie einfach eins, äquivalent zu oder

1. Die Funktion von Promise.resolve() besteht darin, das vorhandene Objekt in ein aufgelöstes Promise-Objekt umzuwandeln. Promise.resolve('test')==new Promise(resolve=>resolve('test'))

2. Promise.reject() gibt auch ein Promise-Objekt mit dem Status „Abgelehnt“ zurück >

3. Die then-Methode wurde oben eingeführt und wird hier nicht vorgestellt.

4. Catch(): Rückruffunktion, wenn ein Fehler auftritt.

5. Promise.all() eignet sich für die erfolgreiche Ausführung von then(), nachdem alle Ergebnisse abgeschlossen sind. Zum Beispiel:

let p1 =new Promise(function(resolve,reject){ resolve(1); }); let p2 = new Promise(function(resolve,reject){ resolve(2); }); let p3 = new Promise(function(resolve,reject){ resolve(3); }); Promise.all([p1, p2, p3]).then(function (results) { console.log('success:'+results); }).catch(function(r){ console.log("error"); console.log(r); });
Nach dem Login kopieren

Endgültige Ausgabe:

6. Die Funktion von Promise.race() besteht darin, mehrere Instanzen gleichzeitig auszuführen Wenn eine Instanz den Status ändert, wird das Versprechen in den von dieser Instanz geänderten Status geändert.

4 >Auf diese Weise können Sie die then-Methode verwenden, um Kettenaufrufe zu implementieren.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

JavaScript Mediator Pattern (ausführliches Tutorial)

Wie verwende ich Dom-Elemente in jQuery?

So implementieren Sie eine ereignisgesteuerte Fortschrittsbalkenkomponente in Vue

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Wissenspunkte zu Versprechen in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!