Explication détaillée des exemples d'utilisation de fonctions de rappel et de gestionnaires dans la programmation asynchrone javascript

Basé sur le mécanisme d'interrogation d'événements du navigateur (et le mécanisme d'interrogation d'événements dans Node.js), JavaScript s'exécute souvent dans un environnement asynchrone. En raison des caractéristiques du langage propre à JavaScript (il ne nécessite pas que les programmeurs contrôlent les threads/processus), il est très important de résoudre la programmation asynchrone en js. On peut dire que dans un projet complet, il est impossible pour les développeurs js de ne pas faire face à des opérations asynchrones.

1. Fonction de rappel

(1) Méthode de fonction de rappel classique : fonction en ligne imbriquée

Supposons que nous avoir une méthode ajax() qui reçoit un paramètre url, lance une requête asynchrone vers l'adresse et exécute le deuxième paramètre (une fonction de rappel) à la fin de la requête :

ajax(url,function(result){
 console.log(result);
});

On peut dire que cette méthode est la méthode de fonction de rappel utilisée par presque tous les développeurs front-end. Avec un tel mécanisme de rappel, les développeurs n'ont pas besoin d'écrire du code comme celui-ci pour deviner quand la requête du serveur reviendra. :

var result=ajax(url);
setTimeout(function(result){
 console.log(result);
},400);

Vous devriez pouvoir comprendre ce que je veux exprimer ici. Nous définissons une minuterie avec un délai de 400 millisecondes, en supposant que la requête ajax que nous effectuons sera terminée dans les 400 millisecondes. Sinon, nous opérerons sur un résultat indéfini.

Mais il y a un problème qui apparaît au fur et à mesure que le projet s'étend : si la scène nous oblige à avoir plusieurs couches de fonctions de rappel imbriquées, le code deviendra difficile à lire et à maintenir :

ajax(url0,function(result0){
 ajax(result0.url1,function(result1){
  ajax(result1.url2,function(result2){
   console.log(result2);
  });
 });
});

(2) Appel de fonctions externes

Afin de résoudre le problème de confusion de code exposé par les fonctions de rappel en ligne, nous introduisons la fonction externe appels pour résoudre des problèmes similaires :

function handle2(result){
 console.log(result);
}
function handle1(result){
 ajax(result.url,function(result){
  handle2(result);
 });
}
ajax(url,function(result){
 handle1(result);
});

En divisant les fonctions en ligne et en appelant des fonctions externes, cette méthode d'optimisation peut grandement maintenir la simplicité du code.

2. Développer un gestionnaire de rappel

En observant les outils de contrôle de processus JavaScript populaires, tels que Nimble, Step et Seq, nous apprendrons un modèle de conception simple : l'asynchrone. Le processus d'exécution de JavaScript est contrôlé via le gestionnaire de rappel. Ce qui suit est un exemple de code clé d'un gestionnaire de rappel typique :

var Flow={};
//设置next方法，在上一个方法完成时调用下一个方法
Flow.next=function(){
 if(this.stack[0]){
  //弹出方法栈中的第一个方法，并执行他
  this.stack.shift()();
 }
};
//设置series方法，接收一个函数数组，并按序执行
Flow.series=function(arr){
 this.stack=arr;
 this.next();
};

//通过Flow.series我们能够控制传入的函数的执行顺序
Flow.series([
  function(){
   //do something
   console.log(1);
   Flow.next();
  },
  function(next){
   //do something
   console.log(2);
   Flow.next();
  }
]);

Nous initialisons un contrôleur de flux, deux attributs de fonction. , séries et suivantes, ont été conçues pour lui. Dans la méthode métier que nous avons écrite, la méthode suivante est déclenchée séquentiellement en appelant Flow.next() à la fin de la méthode ; les fonctions asynchrones sont exécutées séquentiellement en exécutant la méthode série. Cette façon de gérer les appels de fonctions asynchrones via le contrôleur principal simplifie notre processus de programmation, permettant aux développeurs de consacrer plus d'énergie à la logique métier.

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!