Heim > Web-Frontend > js-Tutorial > Hauptteil

Basierend auf es6: Idee der asynchronen Prozesssteuerung

零下一度
Freigeben: 2017-06-26 09:10:04
Original
1333 Leute haben es durchsucht

– Einfache Implementierung asynchroner Prozesssteuerungsideen basierend auf der Spezifikation es6: Promise/A+

Vorwort:

Die leistungsstarken asynchronen Verarbeitungsfunktionen von NodeJS machen es zu einem großartigen Auswahl auf der Serverseite Es ist brillant und die Anzahl der darauf basierenden Anwendungen nimmt weiter zu, aber der durch Asynchronität verursachte verschachtelte und schwer verständliche Code lässt NodeJS nicht so elegant und aufgebläht aussehen. Code ähnlich diesem:

function println(name,callback){var value = {"ztf":"abc","abc":"def","def":1}
    setTimeout(function(){
        callback(value[name]);
    },500);
}

println("ztf",function(name){ 
    println(name,function(res){
        console.log(res);//def        println(res,function(res1){
            console.log(res1);//1        })
    });
});
Nach dem Login kopieren

Das Wertobjekt wird in println des obigen Codes definiert und der Rückruf wird mit einer Verzögerung von fünfhundert Sekunden aufgerufen, um den relevanten Wert zu übergeben .

Erster Aufruf von „ztf“ und Übergabe von „ztf“. . Verwenden Sie def, um 1 zurückzugeben.

Da nodejs als Server verwendet wird, sind mehrere Datenbankabfragen erforderlich. Wenn ich beispielsweise die Berechtigungen eines bestimmten Benutzers abfragen muss, sind es drei Schritte sind erforderlich

 ① Suchen Sie den Benutzer anhand der ID

 ② Suchen Sie die entsprechende Rolle anhand der zurückgegebenen Benutzerrollen-ID

 ③ Suchen Sie die entsprechende Berechtigung anhand der Rolle

Hier sind drei Ebenen verschachtelter Beziehungen erforderlich. Der Code ist fast derselbe wie oben.

Promise/A+-Spezifikation

Promise stellt das Endergebnis einer asynchronen Operation dar. Es gibt drei Zustände, nämlich unvollendeter Zustand, abgeschlossener Zustand (Auflösen), fehlgeschlagener Zustand (Ablehnen) Der Zustand ist irreversibel, der abgeschlossene Zustand kann nicht in den unvollendeten Zustand zurückkehren und der fehlgeschlagene Zustand kann nicht zum abgeschlossenen Zustand werden

 

Die wichtigste Möglichkeit, mit Promise zu interagieren, besteht darin, die Callback-Funktion in ihrer then-Methode zu übergeben, um einen Kettenaufruf zu bilden,

 

 

Implementierung

Schauen wir uns zunächst an, wie die Promise/A+-Spezifikation in bestimmten Anwendungen aufgerufen wird:

Wir können das obige Beispiel ändern in:

basierend auf Die Versprechensspezifikation
var  printText = function(name){var deferred = new Deferred(); //new一个托管函数println(name,deferred.callback());//把回调函数托管到Deferred中实现return deferred.promise; //返回promise对象实现链式调用}

printText("ztf")
.then(function(name){
    console.log(name);return printText(name); //第二次调用依赖第一次调用 返回promise对象  在成功态中判断
})
.then(function(res){
    console.log(res);//defreturn printText(res);
})
.then(function(res1){
    console.log(res1);//1});
Nach dem Login kopieren

In gewissem Maße ändert diese Art von Code den Status quo der kontinuierlichen Verschachtelung von asynchronem Code. Durch den Kettenaufruf der then()-Methode wird der Prozess geändert Kontrolle des asynchronen Codes wird erreicht.

//处理回调var Promise = function(){this.queue = []; //存储的是回调函数的队列this.isPromise = true; 
}//延迟对象var Deferred = function(){this.promise = new Promise();
}
Deferred.prototype = {//托管了callback回调函数    callback:function(){
        
    },//完成态    resolve:function(){
        
    },//失败态    reject:function(){
        
    }
}
Nach dem Login kopieren

Hier werden zwei Objekte definiert: Promise und Deferred. Promise ist für die Verarbeitung der verzögerten Funktionen verantwortlich Objekte.

 Promise =.queue = []; .isPromise = = handler =((fulfilledHandler) == =((errorHandler) == =  Deferred =.promise = =
Nach dem Login kopieren

Sie können sehen, dass die Methode Promise.then den Rückruf einfach in die Warteschlange einfügt, einer im Abschlussstatus und der andere im Fehlerstatus ausgeführt wird.

Um den gesamten Prozess abzuschließen, müssen Sie auch die Abschluss- und Fehlerverarbeitungsmethoden im Deferred definieren:

//处理内部操作var Promise = function(){this.queue = []; //存储的是回调函数的队列this.isPromise = true; 
}
Promise.prototype = {//then方法 fulfilledHandler是完成态时执行的回调函数 errorHandler则是失败态
Nach dem Login kopieren
  then:function(fulfilledHandler,errorHandler){
        var handler = {};
        if(typeof(fulfilledHandler) == "function"){
            handler.fulfilled = fulfilledHandler;
        }
        if(typeof(errorHandler) == "function"){
            handler.errored = errorHandler;
        }
     this.queue.push(handler);
        return this;
    }
Nach dem Login kopieren
 
 Deferred =.promise = =   self =  promise =((handler = promise.queue.shift())){ (handler && res = handler.fulfilled.apply(self,args); (res && res.isPromise){ res.queue ==
Nach dem Login kopieren

Die Operation „Abschlussstatus“ wurde hinzugefügt. Dieser Code ruft den Satz von Rückruffunktionen ab, die von .then Promise.Queue übergeben wurden, während er nacheinander aufgerufen wird, wobei die aktuellen Argumente übergeben werden

und dann müssen wir den Abschlussstatus in den verwalteten Zustand versetzen Rückruffunktion (Deferred.callback()), gemäß der Logik ausführen:

 Promise =.queue = []; .isPromise = = handler =((fulfilledHandler) == =((errorHandler) == =  Deferred =.promise = = self =  args = Array.prototype.slice.call(arguments); = args.concat(Array.prototype.slice.call(arguments,));  self =  promise = args =((handler = promise.queue.shift())){ (handler && res = handler.fulfilled.apply(self,args); (res && res.isPromise){ res.queue ==
Nach dem Login kopieren

Der Code ist hier Die Hauptfunktion wurde abgeschlossen, aber Der Fehlerstatus wurde nicht hinzugefügt. Die Implementierungsmethode ist mit Ausnahme der sekundären Verschachtelung identisch:

//处理内部操作var Promise = function(){this.queue = []; //存储的是回调函数的队列this.isPromise = true; 
}
Promise.prototype = {//then方法 fulfilledHandler是完成态时执行的回调函数 errorHandler则是失败态    then:function(fulfilledHandler,errorHandler){var handler = {};if(typeof(fulfilledHandler) == "function"){
            handler.fulfilled = fulfilledHandler;
        }if(typeof(errorHandler) == "function"){
            handler.errored = errorHandler;
        }this.queue.push(handler);return this;
    }
}//处理外部操作var Deferred = function(){this.promise = new Promise();
}
Deferred.prototype = {//托管了callback回调函数    callback:function(){var self = this;var args = Array.prototype.slice.call(arguments); //将arguments转为数组return function(err){if(err){//这里是失败态  传入了error对象                self.reject.call(self,err);return;
            }
            args = args.concat(Array.prototype.slice.call(arguments,1)); //合并外部arguments 与内部arguments 去掉err//这里是完成态            console.log(args);
            self.resolve.apply(self,args);
            
        }
    },//完成态    resolve:function(){var self = this;var promise = self.promise;var args = arguments;var handler;        while((handler = promise.queue.shift())){ //取出待执行队列中的第一个函数 直到全部执行完毕if(handler && handler.fulfilled){var res = handler.fulfilled.apply(self,args); //调用失败态回调函数if(res && res.isPromise){ //如果有二次嵌套 则再次执行promiseres.queue = promise.queue;
                    self.promise = res;return;
                }
            }
        }
    },//失败态    reject:function(err){var self = this;var promise = self.promise;var args = arguments;var handler;while((handler = promise.queue.shift())){ //取出待执行队列中的第一个函数 直到全部执行完毕if(handler && handler.errored){                var res = handler.fulfilled.call(self,err); //调用完成态回调函数                
                
            }
        }
    }
}
Nach dem Login kopieren

Zusammenfassung

Schlüssel Punkte:
① Jede Operation gibt das gleiche Versprechensobjekt zurück und stellt so die Kettenformeloperation sicher

 ② Der erste Parameter des Funktionsrückrufs ist immer das Fehlerobjekt, null

 ③ Jede Kette ist über die then-Methode verbunden und gibt das erneut auszuführende Versprechensobjekt zurück

Das obige ist der detaillierte Inhalt vonBasierend auf es6: Idee der asynchronen Prozesssteuerung. 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
Beliebte Tutorials
Mehr>
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!