Explication détaillée du contrôle global des balises JavaScript et des exemples d'utilisation de la classe Promise

Contrôle global des marques

(1) Contrôle de compteur simple

Peut-être que la méthode asynchrone introduite ci-dessus ne peut toujours pas répondre au scénario commercial dans le développement réel : supposons que nous ayons un (), b(), c() trois méthodes, a et b n'ont aucune dépendance et peuvent être exécutées de manière asynchrone. Mais c ne peut être déclenché qu’une fois a et b terminés. Afin de répondre à une telle implémentation logique, nous ajoutons un compteur global pour contrôler le flux d'exécution du code :

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();

Nous définissons un indicateur de variable globale pour surveiller l'achèvement de la méthode a et de la méthode b. La méthode b simule l'environnement réseau en définissant un minuteur de 200 millisecondes et appellera finalement la méthode c avec succès une fois la méthode b exécutée. De cette façon, nous implémentons des appels dépendants aux méthodes a(), b(), c().

(2) Contrôle orienté données

Lorsque la solution ci-dessus est appliquée dans des scénarios complexes, les problèmes suivants se produiront : le produit a traversé plusieurs itérations de version et la méthode c s'appuie sur plus de méthodes, donc l'indicateur de compteur doit être constamment modifié ; les développeurs sont modifiés au cours du processus d'itération du produit. Lorsque les deux situations ci-dessus se produisent, la logique du code devient confuse. La question de savoir si la balise flag peut rester concise et correcte dépend largement des itérations du produit. Par conséquent, nous proposons des améliorations d’optimisation orientées données.

Dans les scénarios de développement réels, la raison de l'existence de dépendances de méthode est essentiellement due à l'existence de dépendances de données. Pour l'exemple simple ci-dessus : la méthode c dépend des résultats de la méthode a et de la méthode b. , et cela ne dépend pas du fait que l'indicateur soit 0. Par conséquent, nous pouvons remplacer la vérification si le marqueur a été mis à 0 par vérifier si la méthode dépendante a terminé le traitement des données. Dans cet exemple, nous vérifions si aValue et bValue ont terminé l'affectation dans la méthode c :

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

<.>Pour des scénarios plus généraux, nous modifions le code ci-dessus comme suit :

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();

Avec la méthode d'inspection orientée données, lors d'une expansion future, il nous suffit d'ajouter checkDependency à la nouvelle méthode. en modifiant l'objet et en vérifiant l'existence des attributs correspondants dans la méthode c, l'exécution séquentielle de méthodes dépendantes asynchrones peut être réalisée.

Classe Promise

Afin de résoudre la complexité des méthodes asynchrones en JavaScript, une méthode de contrôle unifiée a été officiellement introduite :

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");
});

L'exemple de code montre une application Promise de base. Peut-être que l'appel en chaîne suivant est plus courant dans les scénarios réels :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!