Premiers pas avec les promesses JavaScript

Le code asynchrone est utile pour effectuer des tâches qui prennent du temps mais, bien sûr, ce n'est pas sans inconvénients . Le code asynchrone utilise des fonctions de rappel pour traiter ses résultats, mais les fonctions de rappel ne peuvent pas renvoyer des valeurs que les fonctions JavaScript typiques peuvent traiter.

Ainsi, non seulement ils suppriment notre capacité à contrôler l' exécution de la fonction, mais ils rendent également la gestion des erreurs un peu compliquée. C'est là que l' objet Promise entre en jeu, car il vise à combler certains des nids de poule en codage asynchrone .

Promise est techniquement un objet interne standard en JavaScript, ce qui signifie qu'il est intégré à JavaScript . Il est utilisé pour représenter le résultat final d'un bloc de code asynchrone (ou la raison pour laquelle le code a échoué) et dispose de méthodes pour contrôler l' exécution du code asynchrone .

Syntaxe

Nous pouvons créer une instance de l'objet Promise utilisant le new mot-clé:

 nouvelle promesse (function (resolve, reject) {}); 

La fonction transmise en tant que paramètre au constructeur Promise() est appelée exécuteur . Il contient le code asynchrone et possède deux paramètres du type Function, appelés fonctions de resolve et de reject (plus d'informations à ce sujet sous peu).

L'objet States of the Promise

L' état initial d'un objet Promise est appelé en attente . Dans cet état, le résultat du calcul asynchrone n'existe pas .

L'état initial en attente passe à l'état satisfait lorsque le calcul est réussi . Le résultat du calcul est disponible dans cet état.

En cas d' échec du calcul asynchrone, l'objet Promise passe à l'état rejeté à partir de son état initial en attente . Dans cet état, la raison de l'échec de calcul (c'est-à-dire un message d'erreur) est rendue disponible.

Pour passer de l'état en attente à l'état satisfait, la fonction resolve() est appelée . Pour passer de l'état en attente à l'état rejeté, reject() est appelé .

Lorsque l'état passe de pending à completed, le gestionnaire d'événements de la méthode then de l'objet Promise est exécuté. Et, lorsque l'état passe de pending à rejeté, le gestionnaire d'événements de la méthode catch de l'objet Promise est exécuté.

Exemple 1

Code "Non-Promisifié"

Supposons qu'il existe un fichier hello.txt contenant le mot "Hello". Voici comment nous pouvons écrire une requête AJAX pour récupérer ce fichier et afficher son contenu, sans utiliser l'objet Promise :

 function getTxt () {let xhr = nouveau XMLHttpRequest (); xhr.open ('GET', 'bonjour.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {try {switch (this.status) {cas 200: document.write (this.réponse); Pause; case 404: lancer 'Fichier non trouvé'; par défaut: throw 'Echec de récupération du fichier'; }} catch (err) {console.log (err)}}; } getTxt (); 

Si le contenu du fichier a été récupéré avec succès, c'est-à - dire que le code d'état de la réponse est 200, le texte de la réponse est écrit dans le document . Si le fichier est introuvable (état 404), un message d'erreur «Fichier introuvable» est généré. Sinon, un message d'erreur général indiquant l'échec de l'extraction du fichier est renvoyé.

Code "Promisified"

Maintenant, promenons le code ci-dessus :

 function getTxt () {return new Promise (fonction (résoudre, rejeter) {let xhr = nouvelle XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {switch (this.status) {cas 200: résolution (this.response); cas 404: reject ('Fichier non trouvé'); défaut: reject ('Echec de récupère le fichier ');}};}); } getTxt (). then (fonction (txt) {document.write (txt);}). catch (fonction (err) {console.log (err);}); 

La fonction getTxt() est maintenant codée pour renvoyer une nouvelle instance de l'objet Promise, et sa fonction d'exécuteur contient le code asynchrone d'avant.

Lorsque le code d'état de réponse est 200, la Promise est satisfaite en appelant resolve() (la réponse est transmise en tant que paramètre de resolve() ). Lorsque le code d'état est 404 ou un autre, la Promise est rejetée en utilisant reject() (avec le message d'erreur approprié en tant que paramètre de reject() ).

Les gestionnaires d'événements pour les méthodes then() et catch() de l'objet Promise sont ajoutés à la fin .

Lorsque la Promise est remplie, le gestionnaire de la méthode then() est exécuté. Son argument est le paramètre passé de resolve() . Dans le gestionnaire d'événements, le texte de la réponse (reçu en tant qu'argument) est écrit dans le document .

Lorsque la Promise est rejetée, le gestionnaire d'événements de la méthode catch() est exécuté, enregistrant l'erreur .

Le principal avantage de la version promisifiée ci-dessus du code est la gestion des erreurs . Au lieu de jeter des exceptions non interceptées - comme dans la version non promis - les messages d'échec appropriés sont renvoyés et consignés.

Mais, ce n'est pas seulement le retour des messages d'échec mais aussi le résultat du calcul asynchrone qui peut être vraiment avantageux pour nous. Pour voir cela, nous devrons développer notre exemple.

Exemple 2

Code "Non-Promisifié"

Au lieu de simplement afficher le texte de hello.txt, je veux le combiner avec le mot "World" et l'afficher sur l'écran après un délai de 2 secondes . Voici le code que j'utilise:

 function getTxt () {let xhr = nouveau XMLHttpRequest (); xhr.open ('GET', 'bonjour.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {try {switch (this.status) {cas 200: document.write (concatTxt (this.réponse)); Pause; case 404: lancer 'Fichier non trouvé'; par défaut: throw 'Echec de récupération du fichier'; }} catch (err) {console.log (err)}}; } function concatTxt (res) {setTimeout (fonction () {return (res + 'Monde')}, 2000); } getTxt (); 

Sur le code d'état 200, la fonction concatTxt() est appelée pour concaténer le texte de la réponse avec le mot "World" avant de l'écrire dans le document.

Mais, ce code ne fonctionnera pas comme souhaité . La fonction de rappel setTimeout() ne peut pas renvoyer la chaîne concaténée . Ce qui sera imprimé dans le document n'est undefined car c'est ce que concatTxt() renvoie .

Code "Promisified"

Donc, pour que le code fonctionne, promettons le code ci-dessus, y compris concatTxt() :

 function getTxt () {return new Promise (fonction (résoudre, rejeter) {let xhr = nouvelle XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {switch (this.status) {cas 200: résolution (this.response); cas 404: reject ('Fichier non trouvé'); défaut: reject ('Echec de récupère le fichier ');}};}); } function concatTxt (txt) {return new Promise (fonction (résoudre, rejeter) {setTimeout (function () {resolve (txt + 'Monde');}, 2000);}); } getTxt (). then ((txt) => {return concatTxt (txt);}). then ((txt) => {document.write (txt);}). catch ((err) => {console. log (err);}); 

Tout comme getTxt(), la fonction concatTxt() renvoie également un nouvel objet Promise au lieu du texte concaténé. La Promise retournée par concatTxt() est résolue dans la fonction de callback de setTimeout() .

Près de la fin du code ci-dessus, le gestionnaire d'événements de la première méthode then() s'exécute lorsque la Promise de getTxt() est remplie, c'est-à-dire lorsque le fichier est récupéré avec succès . Dans ce gestionnaire, concatTxt() est appelé et la Promise retournée par concatTxt() est renvoyée .

Le gestionnaire d'événements de la seconde méthode then() s'exécute lorsque la Promise retournée par concatTxt() est remplie, c'est-à-dire que le délai de deux secondes est terminé et que resolve() est appelée avec la chaîne concaténée comme paramètre.

Enfin, catch() récupère toutes les exceptions et les messages d'échec des deux promesses.

Dans cette version Promise, la chaîne "Hello World" sera imprimée avec succès dans le document.

Freebie Release: Icônes vectorielles Vintage Radio

Pour continuer nos remerciements reconnaissants à nos lecteurs et à la communauté en général, nous sommes heureux de publier un cadeau gratuit très utile - Vintage Radio Icons . Ces éléments GUI viennent en formes vectorielles, ce qui signifie que vous pouvez facilement redimensionner les éléments sans perte de qualité.Le kit gra

(Conseils techniques et de conception)

L'évolution du design des mascottes de la coupe du monde

Les mascottes sont monnaie courante dans de nombreux événements sportifs et les choses ne sont pas différentes en ce qui concerne la Coupe du monde. Les mascottes sont utilisées pour englober l'esprit d'un événement particulier, comme vous pouvez le voir dans la conception de la mascotte de tatouage de la coupe du monde de cette année.Cepend

(Conseils techniques et de conception)