L'interaction des pages Web devient de plus en plus complexe, et JavaScript devient également de plus en plus d'opérations asynchrones. Par exemple, une demande AJAX courante nécessite une réponse aux opérations lorsque la demande est terminée. La demande est généralement asynchrone. Pendant le processus de demande, l'utilisateur peut effectuer d'autres opérations sans bloquer la page. Cet effet d'interaction asynchrone est assez convivial avec l'utilisateur. Mais pour les développeurs, il est très hostile de faire face à ce type d'opération en grande quantité. Les opérations effectuées par les demandes asynchrones doivent être prédéfinies dans la fonction de rappel, et cette fonction doit être appelée une fois la demande terminée. Cette méthode de programmation asynchrone non linéaire mettra les développeurs inconfortables, et il apporte également de nombreux inconvénients, augmentant le couplage et la complexité du code, et l'organisation du code sera très inélégante, réduisant considérablement la maintenabilité du code. La situation est plus compliquée. Si une opération doit attendre que plusieurs demandes AJAX asynchrones soient remplies avant de pouvoir être effectuées, la fonction de rappel sera imbriquée. Si plusieurs couches doivent être imbriquées, vous ne pouvez demander que des bénédictions.
Jetons un coup d'œil aux fonctions asynchrones courantes suivantes.
La copie de code est la suivante:
var showmsg = function () {
setTimeout (function () {
alert ('bonjour');
}, 5000);
};
Cela est généralement fait si vous souhaitez ajouter un rappel à la fonction.
La copie de code est la suivante:
var showmsg = fonction (rappel) {
setTimeout (function () {
alert ('bonjour');
// Ajouter un rappel ici
callback ();
}, 5000);
};
Si vous utilisez Easy.js Promise, la méthode d'ajout de rappels sera beaucoup plus élégante, tant que vous devez encapsuler la fonction d'origine dans une instance de promesse.
La copie de code est la suivante:
var showmsg = function () {
// Construire l'instance de promesse
var promesse = new E.Promise ();
setTimeout (function () {
alert ('bonjour');
// change l'état de promesse
promesse.resolve («fait»);
}, 5000);
// retour à l'instance de promesse
Retour Promise;
};
Il y a 3 é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 à modifier l'état de la promesse à terminer 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 3 États, à savoir en attente (non terminés), résolu (terminé, réussi) et rejeté (rejeté, échoué). Jetons un coup d'œil à l'ajout de rappels.
La copie de code est la suivante:
showmsg (). alors (fonction (str) {
// Le rappel est ajouté ici
rappel (str);
});
Cela sépare complètement la fonction de rappel de la fonction asynchrone originale et du point de vue de l'organisation du code, elle est beaucoup plus élégante. Resolve accepte un paramètre qui peut facilement transférer des données vers le rappel ajouté à l'aide de la méthode alors.
Pour les demandes AJAX, Easy.js résume directement la méthode AJAX dans un objet Promise, et vous pouvez ajouter directement la méthode alors à rappeler.
La copie de code est la suivante:
E.ajax ({
URL: 'test1.php',
Type: 'Get'
})
.Then (function () {
// Ajouter un rappel avec une demande réussie
}, fonction(){
// Ajouter un rappel qui a échoué la demande
});
La méthode alors accepte 2 fonctions comme paramètres. La première fonction est un rappel terminé et le second est un rappel raté.
Et s'il y a plusieurs demandes AJAX mentionnées ci-dessus? Ensuite, vous devez utiliser la méthode quand. Cette méthode peut accepter plusieurs instances de promesse sous forme de paramètres.
La copie de code est la suivante:
var requêtes = e.when (e.ajax ({{
URL: 'test1.php',
Type: 'Get'
}), E.ajax ({
URL: «test2.php»,
Type: 'Get'
}));
requêtes.
Console.log ('Success:' + Arg1 [0] + Arg2 [0]);
}, fonction (arg1, arg2) {
console.log ('échec:' + arg1 + arg2);
});
Le moment où la méthode 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 une instance rejetée, le rappel rejeté est immédiatement exécuté.
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 été reportées pour implémenter ces fonctions. Ici, je veux toujours me plaindre du report de JQuery. En mettant de côté son utilisation interne, ce devrait être le module avec le taux d'utilisation le plus bas, qui a une certaine relation avec sa méthode d'utilisation plus complexe.