Rappels et promesses | Expliqué avec des exemples
Dans cet article, nous verrons ce que sont les rappels et les promesses en JavaScript expliqués à l'aide d'exemples.
Que sont les rappels?
Les rappels sont des fonctions qui sont transmises à l'intérieur des arguments d'autres fonctions, cette procédure est valide en JavaScript car les fonctions sont des objets et les objets peuvent être transmis comme arguments aux fonctions. La structure de base de la fonction de rappel ressemble à ceci.
Fonction Demofonction (rappel)rappeler();
Séquence d'exécution et besoin de rappels
Les fonctions de rappel sont utilisées pour acquérir le contrôle de la séquence d'exécution. Généralement, les fonctions sont exécutées sur la base de la séquence qu'ils sont invoqués, et non sur la séquence dans laquelle ils sont définis. Par exemple:
fonction de fonction 1 ()console.log ("je suis tâche 1");
fonction de fonction3 ()
console.log ("je suis tâche 3");
fonction de fonction 2 ()
console.log ("je suis tâche 2");
Job1 ();
Job2 ();
Job3 ();
Vous obtiendrez la sortie suivante:
Mais que se passe-t-il si nous voulons invoquer la tâche 2 uniquement lorsque la tâche 1 termine son traitement. Pour cela, nous avons besoin de fonctions de rappel et d'une compréhension de base de l'exécution asynchrone.
Un exemple de rappel en action
Considérez le code suivant:
Var Membres = ["John Doe", "Sam Smith", "Allie Cartel"];fonction addNewMember (NewUser)
membres.push (NewUser);
fonction getAllMembers ()
console.journal (membres);
AddNewMember ("alpha");
getAllMembers ();
Nous travaillons avec un tableau qui contient la liste des membres d'un club social, et nous avons deux fonctions. Une fonction qui imprime la liste de tous les membres et l'autre est utilisée pour ajouter un membre à la liste.
Changeons ce code pour qu'il imite le comportement des bases de données réelles et des retards de réseautage comme le décalage et les pings.
Var Membres = ["John Doe", "Sam Smith", "Allie Cartel"];fonction addNewMember (NewUser)
setTimeout (function ()
membres.push (NewUser);
console.log ("membre ajouté");
, 200);
fonction getAllMembers ()
setTimeout (function ()
console.log ("Les membres sont:");
console.journal (membres);
, 100);
AddNewMember ("alpha");
getAllMembers ();
Comme vous pouvez le voir, ce code utilise le setTimeout () fonction pour imiter les retards des bases de données. L'adducteur prend environ 2 secondes et getallMembers () La fonction prend 1 seconde.
Nous voulons ajouter un nouvel utilisateur «alpha» et imprimer la liste après l'ajout du membre, pas avant et c'est pourquoi nous utilisons la séquence:
AddNewMember ("alpha");getAllMembers ();
Exécutez le code et vous obtiendrez la sortie suivante:
La liste a été imprimée en premier, puis le membre a été ajouté. C'est parce que le programme n'a pas attendu le ajouter un membre() fonction pour terminer le traitement. Maintenant si nous utilisons des fonctions de rappel pour exécuter le getallMembers () fonction uniquement après le AddNewMember () est terminé, notre code devient:
Var Membres = ["John Doe", "Sam Smith", "Allie Cartel"];fonction addNewMember (NewUser, rappel)
setTimeout (function ()
membres.push (NewUser);
console.log ("membre ajouté");
rappeler();
, 200);
fonction getAllMembers ()
setTimeout (function ()
console.log ("Les membres sont:");
console.journal (membres);
, 100);
AddNewMember ("Alpha", GetAllMembers);
Si vous regardez le code, vous verrez cela à l'intérieur du AddNewMember () fonction Nous prenons un argument de rappel, cela garantira que la fonction de rappel sera exécutée dans la séquence souhaitée.
La sortie de l'extrait de code ci-dessus est:
Le nouveau membre a été ajouté en premier, puis toute la liste a été imprimée sur la console. C'est ainsi que vous pouvez utiliser des rappels pour prendre le contrôle de la séquence d'exécution.
Quelles sont les promesses?
Une promesse est un objet et est quelque chose qui est fait / terminé à l'avenir. En javascript, c'est exactement la même chose que dans la vraie vie. Le syntaxe d'une promesse en javascript est donnée ci-dessous:
var mypromise = nouvelle promesse (fonction (résoudre, rejeter)// un code
);
Comme on peut le voir dans la syntaxe Promise, le constructeur Promise n'accepte que la fonction de rappel comme un argument. Les paramètres de résolution et de rejet sont utilisés dans la fonction de rappel, la résolution étant appelée lorsque les activités menées à l'intérieur de la fonction de rappel sont réussies. Si la procédure est infructueuse, cependant, le rejet est appelé.
Par exemple, supposons que votre mère vous promet de vous procurer un vélo le jour de votre anniversaire. Cette promesse est sa garantie qu'elle vous achètera un vélo pour votre anniversaire, mais le moment venu, elle pourra changer d'avis. Afin qu'elle puisse vous acheter un vélo ou non. Ceci est une promesse en langue laïque simple. En regardant cet exemple, nous pouvons identifier trois états / possibilités d'une promesse en JavaScript:
- Réalivé: le vélo est acheté. Valeur du résultat
- En attente: Votre anniversaire n'est pas venu et vous ne savez pas si votre mère vous achètera un vélo ou non. Indéfini
- Rejeté: les vélos ne sont pas achetés pour vous le jour de votre anniversaire. Erreur.
Pour mieux comprendre les promesses exemple:
Nous prendrons cet exemple étape par étape I-E d'abord, nous créerons un objet Promise en utilisant le constructeur de promesses comme vu dans la syntaxe de promesse ci-dessus. Ensuite, nous utiliserons cet objet Promise.
Dans le code ci-dessous, nous allons créer Un objet de promesse:
// Création d'un objet Promisevar mypromise = nouvelle promesse (fonction (résoudre, rejeter)
const numéro1 = 2;
const Number2 = 2;
// comparer deux nombres
if (number1 === numéro2)
// Opération réussie
résoudre();
autre
// Erreur est survenue
rejeter();
);
Dans le code ci-dessus, nous avons d'abord créé un objet de promesse ma promesse, puis transmis une fonction de rappel à l'intérieur du constructeur de promesses. Dans la fonction, nous vérifions si deux nombres sont égaux ou non. Si les numéros sont égaux, l'appel sera résolu, sinon si une erreur vient, l'appel sera rejeté.
Pour utiliser l'objet Promise (ma promesse) nous aurons besoin "promettre aux consommateurs»(Consommer des promesses en enregistrant les fonctions) connues sous le nom alors() Méthode de réalisation et attraper() Méthode de rejet. Le code ci-dessous illustre ceci:
ma promesse.alors (fonction ()
console.journal ("nombres égaux. Succès");
).
catch (function ()
console.log ('error');
);
Si les nombres qui sont vérifiés sont égaux, le .alors() La méthode sera invoquée et nous verrons «Les nombres égaux. Succès". Cependant, si les nombres ne sont pas égaux, le .attraper() la méthode sera invoquée et nous verrons le Erreur Message dans la fenêtre de la console.
L'ensemble du code est donné ci-dessous:
// Création d'un objet Promisevar mypromise = nouvelle promesse (fonction (résoudre, rejeter)
const numéro1 = 2;
const Number2 = 2;
// comparer deux nombres
if (number1 === numéro2)
// Opération réussie
résoudre();
autre
// Erreur est survenue
rejeter();
);
// Utilisez l'objet Promise
ma promesse.
alors (fonction ()
console.journal ("nombres égaux. Succès");
).
catch (function ()
console.log ('error');
);
De la sortie, nous pouvons voir que les nombres sont égaux.
Conclusion
Pour implémenter le code asynchrone en JavaScript, nous utilisons les fonctions de rappel et les promesses. Une fonction de rappel est adoptée comme un argument à une autre fonction alors que la promesse est quelque chose qui est atteint ou complété à l'avenir. En JavaScript, une promesse est un objet et nous utilisons le constructeur de promesses pour initialiser une promesse. Pour utiliser des objets prometteurs, nous prenons l'aide de promesses aux consommateurs qui sont alors() Méthode (si la promesse est remplie) et attraper() Méthode (si la promesse est rejetée).