1.1 Rückruffunktion
Rückruffunktion: Übergeben Sie Funktion A als Parameter, um eine andere Funktion B aufzurufen. Dann ist A die Rückruffunktion. [Empfohlen: JavaScript-Video-Tutorial]
Einige Beispiele mit dem Namen Callbacks
Funktion Wie viele Hunde haben Sie (fn){
fn('ein Hund')
}Funktion count dogs(number){
console.log(Menge)
}
Wie viele Hunde haben Sie (Hunde zählen) // einen Hund?Anonymer Rückruf
Funktion Wie viele Hunde haben Sie (fn){
fn('ein Hund')
}
Wie viele Hunde haben Sie (function(number){console.log(number)
}) // ein Hund Häufige Beispiele
In jQuery werden Rückruffunktionen verwendet, hier kommen anonyme Rückrufe zum Einsatz.
$("#btn").click(function(){
console.log('klicke auf mich')
})1.2 Callback-Hölle (Callback-Nachteil 1)
Rückrufhölle: Bezieht sich auf die Situation, in der Rückrufe zu stark verschachtelt sind, was das Verständnis des Codes erschwert.
let info = []function Wie viele Hunde haben Sie (fn){
fn('ein Hund')
}function Wie viele Katzen hast du (fn){
fn('eine Katze')
}Funktion kennt(Menge,Rückruf){
info.push(Menge)
console.log(info) if(callback){
Rückruf()
}
}//Beginnen Sie mit dem Aufruf. Wenn es ein paar weitere Ebenen gibt, ist es schwierig zu verstehen, wie viele Hunde Sie haben (Funktion(Anzahl der Hunde){
console.log(Anzahl der Hunde)
Verstanden(Anzahl der Hunde, Funktion(){
Wie viele Katzen haben Sie?(Funktion(Anzahl der Katzen){
console.log(Anzahl der Katzen)
Verstanden (Anzahl der Katzen)
})
})
})1.3 So lösen Sie das Problem, ohne Promise zu verwenden
Verwenden Sie benannte Funktionen anstelle anonymer Funktionen
let info = []function Wie viele Hunde haben Sie (fn){
fn('ein Hund')
}function Wie viele Katzen hast du (fn){
fn('eine Katze')
}Funktion kennt(Menge,Rückruf){
info.push(Menge)
console.log(info) if(callback){
Rückruf()
}
}Funktion sagt Ihnen die Anzahl der Katzen (Anzahl der Katzen){
console.log(Anzahl der Katzen)
Verstanden (Anzahl der Katzen)
}Funktion weiterzählen(){
Wie viele Katzen haben Sie (geben Sie die Anzahl der Katzen an)
}Funktion sagt Ihnen die Anzahl der Hunde (Anzahl der Hunde){
console.log(Anzahl der Hunde)
Verstanden (Anzahl der Hunde, zähl weiter)
}
Wie viele Hunde haben Sie (sagen Sie die Anzahl der Hunde) // Es scheint nicht viel besser zu sein. . .1.4 Die Rückrufmethoden sind unterschiedlich und müssen separat beachtet werden (Rückrufnachteil 2).
readFile('C:\1.txt',function (error, data) { // Rückruf in node.js Lesedateimethode if(error) {
console.log('Erfolg')
console.log(data.toString())
} anders {
console.log('Datei konnte nicht gelesen werden')
}
})
$.ajax({ //Callback url:'/2.txt' in der Ajax-Methode in jQuery
Erfolg: Funktion(Antwort) {
console.log('Erfolg')
},
Fehler: Funktion(){
console.log('Fehler')
}
})Versprechen sind eine Lösung für die asynchrone Programmierung, die sinnvoller und leistungsfähiger ist als herkömmliche Lösungen – Rückrufe und Ereignisse. Es wurde zuerst von der Community vorgeschlagen und implementiert. ES6 hat es in den Sprachstandard geschrieben, seine Verwendung vereinheitlicht und Promise-Objekte nativ bereitgestellt.
3.1 Umsetzungsprinzip
ES6 legt fest, dass das Promise-Objekt ein Konstruktor ist, der zum Generieren von Promise-Instanzen verwendet wird. Indem Sie eine Instanz des Promise-Objekts innerhalb der Funktion zurückgeben, können Sie die Eigenschaften und Methoden des Promise für den nächsten Schritt verwenden.
Funktion Funktionsname(){ neues Versprechen zurückgeben(Funktion(auflösen, ablehnen) {
// ... etwas Code if (/* asynchroner Vorgang erfolgreich */){
lösen(Wert); // Wird aufgerufen, wenn die asynchrone Operation erfolgreich ist und das Ergebnis als Parameter übergeben } else {
Reject(error); // Wird aufgerufen, wenn ein asynchroner Fehler auftritt, und übergibt den Fehler als Parameter }
})
}3.2 Aufruflogik
Weder S1 noch E1 haben einen Fehler gemeldet. Führen Sie S2 aus (die Ausführung wird aufgelöst, das System geht davon aus, dass sie abgeschlossen ist, und es wird kein Fehler gemeldet).
Wenn entweder S1 oder E1 einen Fehler meldet, führen Sie E2 aus (lehnen Sie die Ausführung ab, das System geht davon aus, dass sie nicht abgeschlossen ist, und meldet einen Fehler).
Front-End-Einstieg (vue) zum Mastery-Kurs: Einstieg ins Lernen
4.1 Eigenschaften und Methoden von Promise
Eigentum
Promise.prototype repräsentiert die Prototypmethode des Promise-Konstruktors
Promise.prototype.then()
Geben Sie ein Versprechen zurück. Es sind höchstens zwei Parameter erforderlich: die Erfolgs- und Fehler-Rückruffunktionen von Promise.
Promise.prototype.catch()
Geben Sie ein Versprechen zurück und behandeln Sie die Ablehnung. Äquivalent zu Promise.prototype.then(undefiniert, onRejected)
Promise.prototype.finally()
Die Methode „final()“ gibt ein Promise zurück. Nach der Ausführung von „then()“ und „catch()“ wird die von „final“ angegebene Rückruffunktion ausgeführt. Vermeiden Sie die Situation, in der dieselbe Anweisung einmal in then() und Catch() geschrieben werden muss.
Promise.all(iterierbar)
Gibt eine Promise-Instanz zurück. Nachdem alle Versprechen in den iterierbaren Parametern aufgelöst wurden, schließt der Rückruf die Auflösung ab.
Promise.race(iterierbar)
Gibt ein Versprechen zusammen mit dem Rückgabewert des Versprechensobjekts oder dem Fehlergrund für die Ablehnung zurück, sofern in der Iterable ein Versprechensobjekt vorhanden ist, das „auflöst“ oder „ablehnt“.
Promise.resolve()
Gibt ein Promise-Objekt zurück, das mit dem angegebenen Wert aufgelöst wird. Wenn dieser Wert jedoch ein Thenable ist (d. h. mit einer Then-Methode), „folgt“ das zurückgegebene Versprechen dem Thenable-Objekt und nimmt seinen endgültigen Zustand an (bezogen auf gelöst/abgelehnt/ausstehend/erledigt); wenn der eingehende Wert selbst es ist ein Promise-Objekt, dann wird das Objekt als Rückgabewert der Promise.resolve-Methode zurückgegeben; andernfalls wird das Promise-Objekt mit diesem Wert als Erfolgsstatus zurückgegeben.
Promise.reject()
Gibt ein Promise-Objekt mit dem Grundparameter für die Ablehnung zurück.
4.2 Schreiben Sie das Beispiel in Callback Hell in Promise-Form um
Sie können sehen, dass die Logik nach der Verwendung von Promise sehr intuitiver und vollständiger geschrieben wird.
Wenn Promise in Promise verschachtelt ist, das heißt, wenn Promise verkettet ist, achten Sie auf Fehler bei der Informationsübertragung. Wenn für jeden Schritt Daten aus dem vorherigen Schritt erforderlich sind, müssen die Parameter erfolgreich durch die Auflösung übergeben werden . Parameter, falls fehlgeschlagen, Parameter durch Ablehnung übergeben. Wenn Sie vergessen, Parameter zu übergeben, erhalten Sie nicht das gewünschte Ergebnis.
„resolve“ gibt erfolgreiche Daten an den nächsten Rückruf zurück
„Reject“ gibt fehlgeschlagene Daten an den nächsten Rückruf zurück.
Übergeben Sie hier einen aufzulösenden Parameter und ändern Sie ihn in einen Fehlerbeispiel. Übergeben Sie nicht zuerst die abzulehnenden Parameter. Wenn dies fehlschlägt, werden die Daten beim nächsten Rückruf nicht abgerufen.
Übergeben Sie Parameter zum Ablehnen
Wir können sehen, dass der nächste Erfolgsrückruf auch dann ausgeführt wird, wenn er nicht bekannt ist () standardmäßig undefiniert zurückgibt, was der Verarbeitung des Fehlers entspricht. der nächste Rückruf wird umgesetzt.
Ändern Sie es wie erwartet, das heißt, es wird nicht aufgerufen, wenn es fehlschlägt.
Kurzform für das Nichtaufrufen eines Scheiterns
Nachdem die obige Situation ausgeführt wurde, wird der Erfolgsrückruf in .then (mit Ausnahme von Hunden) nicht ausgeführt. Fügen wir einen Fehlerrückruf hinzu, um ihn anzuzeigen
Sie können auch „resolve“ zurückgeben, damit nachfolgende erfolgreiche Rückrufe ausgeführt werden können.
4.3 Anwendung
Das Laden des Bildes schreibt das Laden des Bildes als Versprechen. Sobald das Laden abgeschlossen ist, ändert sich der Status des Versprechens.
const preloadImage = Funktion (Pfad) {
neues Versprechen zurückgeben (Funktion (auflösen, ablehnen) {
const image = new Image();
image.onload = auflösen;
image.onerror = ablehnen;
image.src = Pfad;
});
};Die Kombination aus Generatorfunktion und Promise (Einzelheiten finden Sie im Referenzlink, Ruan Yifengs Tutorial)
5.1 warten
erfolgreicher Fall 
Verwenden Sie im Fehlerfall Try Catch
Verwenden Sie „await“ mit „try-catch“, was vollständiger ist.
Promise-Objekte können verwendet werden, um gewöhnliche Funktionen in Promise-zurückgebende Formen umzuwandeln und so das Problem der Callback-Hölle zu lösen.
Verstehen Sie die Erfolgs- und Misserfolgsaufruflogik von Promise und können Sie diese flexibel anpassen.
Verstehen Sie das Kernwissen, wenden Sie es zuerst an und integrieren und absorbieren Sie das Wissen langsam.
Das Obige ist der detaillierte Inhalt der Beispielanalyse des Prinzips und der Verwendung von ES6 Promise!
