Exemple d'encapsulation en mode promesse de compétences callback_javascript asynchrones JavaScript-js tutoriel-php.cn

Exemple d'encapsulation en mode promesse de compétences callback_javascript asynchrones JavaScript

WBOY

Libérer： 2016-05-16 16:45:40

original

1269 Les gens l'ont consulté

Les interactions sur les pages Web deviennent de plus en plus complexes et JavaScript comporte de plus en plus d'opérations asynchrones. Par exemple, les requêtes ajax courantes nécessitent une opération de réponse lorsque la requête est terminée. La requête est généralement asynchrone. Pendant le processus de requête, l'utilisateur peut également effectuer d'autres opérations sans bloquer la page. Cet effet d'interaction asynchrone est tout à fait bénéfique pour l'utilisateur. amical. Mais pour les développeurs, il est très peu convivial de gérer ce genre d’opérations en grande quantité. L'opération complétée par la requête asynchrone doit être prédéfinie dans la fonction de rappel, et cette fonction doit être appelée lorsque la requête est terminée. Cette méthode de programmation asynchrone non linéaire rendra les développeurs très mal à l'aise, et elle apportera également beaucoup d'inconvénients, augmentera le couplage et la complexité du code, et l'organisation du code sera également très inélégante, réduisant considérablement l'efficacité du code. .Maintenabilité. La situation est plus compliquée. Si une opération doit attendre que plusieurs requêtes ajax asynchrones soient terminées avant de pouvoir être exécutée, il y aura une imbrication de fonctions de rappel. Si vous devez imbriquer plusieurs niveaux, vous ne pouvez alors demander que des bénédictions.
Jetons un coup d'œil à la fonction asynchrone courante suivante.

Copier le code Le code est le suivant :

var showMsg = function(){
 setTimeout( function(){
 alert( 'bonjour' );
 }, 5000 );
};

Si vous souhaitez ajouter un rappel à la fonction, vous le faites généralement.

Copier le code Le code est le suivant :

var showMsg = function( callback ){
 setTimeout (function(){
 alert( 'hello' );
 // Ajouter un rappel ici 
 callback();
 }, 5000 );
};

Si vous utilisez easy.js Promise, la méthode d'ajout de rappels sera beaucoup plus élégante, à condition que la fonction d'origine doive être encapsulée dans une instance de promesse.

Copier le code Le code est le suivant :

var showMsg = function(){
 // Construire une instance de promesse
 var promise = new E.Promise();

 setTimeout(function(){
 alert( 'hello' );

 // Modification l'état de promesse 
                                                                                                                                          qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui est qui qui est qui qui est qui qui est qui qui est qui qui est qui qui est qui qui est 50000000000 >

Il y a trois étapes clés pour encapsuler une fonction ordinaire dans une instance de promesse. La première étape consiste à construire une instance de promesse à l'intérieur de la fonction. La deuxième étape consiste à changer le statut de la promesse en terminé après l'exécution de la fonction de déploiement. . La troisième étape consiste à renvoyer cette instance de promesse. Chaque instance de promesse a trois états, à savoir en attente (inachevé), résolu (terminé, réussi) et rejeté (rejeté, échoué). Voyons comment ajouter des rappels. 

Copier le code

Le code est le suivant :

showMsg().then(function( str ){ // Le rappel est ajouté ici callback( str );});

Cela sépare complètement la fonction de rappel de la fonction asynchrone d'origine. Du point de vue de l'organisation du code, c'est beaucoup plus élégant. solve accepte un paramètre qui peut facilement être utilisé pour transmettre des données au rappel ajouté à l'aide de la méthode then. 
Pour les requêtes ajax, easy.js encapsule directement la méthode ajax dans un objet de promesse, et vous pouvez directement ajouter la méthode then à rappeler. 

Copier le code

Le code est le suivant :

E.ajax({ url : 'test1 .php', tapez : 'GET'}).then(function(){ // Ajouter un rappel pour une requête réussie

}, function(){

/ / Ajouter un rappel en cas d'échec de la demande
});

La méthode

then accepte 2 fonctions comme paramètres, la première fonction est le rappel terminé et la seconde est le rappel échoué.
Que se passe-t-il s'il y a plusieurs requêtes ajax mentionnées ci-dessus ? Ensuite, nous devons utiliser la méthode when. Cette méthode peut accepter plusieurs instances de promesse comme paramètres.

Copier le code Le code est le suivant :

var requêtes = E.when(E. ajax({
url : 'test1.php',
tapez : 'GET'
}), E.ajax({
url : 'test2.php',
tapez : ' GET'
}));

requests.then(function( arg1, arg2 ){
console.log( 'success：' arg1[0] arg2[0] );
}, function( arg1, arg2 ){
console.log( 'failure：' arg1 arg2 );
});

La méthode when consiste à stocker plusieurs instances de promesse dans un tableau et à attendre que toutes les instances de promesse du tableau soient terminées avant d'exécuter le rappel terminé. Une fois qu'une instance est rejetée, exécutez-la immédiatement.

Le modèle de promesse est l'une des spécifications de CommonJS. De nombreuses bibliothèques JavaScript traditionnelles ont des implémentations correspondantes, telles que jQuery et Dojo, qui ont différé l'implémentation de ces fonctions. Ici, je veux toujours me plaindre du Deferred de jQuery. Quelle que soit son utilisation interne, ce module devrait être le module avec le taux d'utilisation le plus bas par les utilisateurs. Cela a une certaine relation avec son utilisation plus compliquée.