Ausführliche Erläuterung der globalen JavaScript-Tag-Steuerung und Beispiele für die Verwendung der Promise-Klasse

Globale Markensteuerung

(1) Einfache Gegensteuerung

Vielleicht kann die oben eingeführte asynchrone Methode das Geschäftsszenario in der tatsächlichen Entwicklung immer noch nicht erfüllen: Angenommen, wir haben eine (), b(), c() drei Methoden, a und b haben keine Abhängigkeit und können asynchron ausgeführt werden. Aber c kann erst ausgelöst werden, nachdem sowohl a als auch b abgeschlossen sind. Um eine solche logische Implementierung zu erfüllen, fügen wir einen globalen Zähler hinzu, um den Ausführungsfluss des Codes zu steuern:

var flag=2;
var aValue,bValue;
function a(){
 aValue=1;
 flag--;
 c();
}
function b(){
 setTimeout(function(){
  bValue=2;
  flag--;
  c();
 },200);
}
function c(){
 if(flag==0){
  console.log("after a and b:"+(aValue+bValue));
 }
}
a();
b();

Wir setzen ein globales Variablenflag, um den Abschluss von Methode a und Methode b zu überwachen. Methode b simuliert die Netzwerkumgebung, indem sie einen 200-Millisekunden-Timer einstellt, und ruft schließlich Methode c erfolgreich auf, nachdem Methode b ausgeführt wurde. Auf diese Weise implementieren wir abhängige Aufrufe der Methoden a(), b(), c().

(2) Datenorientierte Steuerung

Wenn die obige Lösung in komplexen Szenarien angewendet wird, treten die folgenden Probleme auf: Das Produkt hat mehrere Versionsiterationen durchlaufen, und die C-Methode ist darauf angewiesen mehr Methoden, daher muss das Zählerflag ständig geändert werden; Entwickler werden während des Produktiterationsprozesses geändert. Wenn die beiden oben genannten Situationen auftreten, wird die Logik des Codes verwirrend. Ob das Flag-Tag prägnant und korrekt bleiben kann, wird weitgehend von Produktiterationen beeinflusst. Daher schlagen wir datenorientierte Optimierungsverbesserungen vor.

In realen Entwicklungsszenarien liegt der Grund für die Existenz von Methodenabhängigkeiten im Wesentlichen in der Existenz von Datenabhängigkeiten. Für das obige einfache Beispiel: Methode c hängt von den Ergebnissen von Methode a und Methode b ab , und es hängt nicht davon ab, ob Flag 0 ist. Daher können wir die Prüfung, ob der Marker auf 0 gesetzt wurde, durch die Prüfung ersetzen, ob die abhängige Methode die Datenverarbeitung abgeschlossen hat. In diesem Beispiel prüfen wir, ob aValue und bValue die Zuweisung in der c-Methode abgeschlossen haben:

function c(){
 if(aValue!==undefined && bValue!==undefined){
  console.log("after a and b:"+(aValue+bValue));
 }
}

Für allgemeinere Szenarien ändern wir den obigen Code wie folgt:

var checkDependency={};
var aValue,bValue;
function a(){
 aValue=1;
 checkDependency.a=true;
 c();
}
function b(){
 setTimeout(function(){
  bValue=2;
  checkDependency.b=true;
  c();
 },200);
}
function c(){
 if(checkDependency.a && checkDependency.b){
  console.log("after a and b:"+(aValue+bValue));
 }
}
a();
b();

Mit der datenorientierten Inspektionsmethode müssen wir bei einer zukünftigen Erweiterung nur checkDependency zur neuen Methode hinzufügen Durch Ändern des Objekts und Überprüfen der Existenz der entsprechenden Attribute in der C-Methode kann die sequentielle Ausführung asynchroner abhängiger Methoden realisiert werden.

Promise-Klasse

Um die Komplexität asynchroner Methoden in JavaScript zu lösen, wurde offiziell eine einheitliche Steuerungsmethode eingeführt:

var bool=false;
/*
 * 新建一个Promise实例，向构造函数传入一个异步执行函数
 * 异步函数会接受两个参数，由Promise传入，对应then方法中传入的方法
 */
var promise=new Promise(function(resolve,reject){
 setTimeout(function(){
  if(bool){
   //根据执行情况相应调用resolve和reject
   resolve(bool);
  }else{
   reject(bool);
  }
 },200);
});
//通过then向Promise实例传入解决方法
promise.then(function resolve(result){
 console.log("success");
},function reject(result){
 console.log("failure");
});

Nach oben Der Beispielcode zeigt eine grundlegende Promise-Anwendung. Möglicherweise kommt der folgende Kettenaufruf in tatsächlichen Szenarien häufiger vor:

new Promise(function(res,rej){
 if(/*异步调用成功*/){
  res(data);
 }else{
  rej(error);
 }
}).then(function resolve(result){
 console.log("success");
},function reject(result){
 console.log("failure");
});

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der globalen JavaScript-Tag-Steuerung und Beispiele für die Verwendung der Promise-Klasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!