Débuter avec les promesses JavaScript

Code asynchrone est utile pour effectuer des tâches qui sont long mais bien sûr, c'est pas dépourvu. Le code asynchrone utilise fonctions de rappel pour traiter ses résultats, cependant les fonctions de rappel ne peut pas retourner les valeurs que les fonctions JavaScript typiques peuvent.

Ainsi, non seulement ils nous enlèvent notre capacité à contrôler la exécution de la fonction mais aussi faire la gestion des erreurs un peu embêtant. C'est là que le Promettre objet vient, car il vise à combler certains des nids-de-poule en codage asynchrone.

Promettre est techniquement un objet interne standard en JavaScript, ça veut dire 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 exécution du code asynchrone.

Syntaxe

Nous pouvons créer un exemple de Promettre objet en utilisant le Nouveau mot-clé:

 nouvelle promesse (fonction (résoudre, rejeter) ); 

La fonction passé en paramètre au Promettre() le constructeur est connu comme le exécuteur. Il contient le code asynchrone et a deux paramètres de la Une fonction type, dénommé résoudre et rejeter fonctions (plus sur ces sous peu).

États du Promettre objet

le Etat initial d'un Promettre l'objet est appelé en attendant. Dans cet état, le résultat du calcul asynchrone n'existe pas.

L'état initial en attente passe à rempli indiquer quand le calcul est réussi. le résultat du calcul est disponible dans cet état.

En cas de calcul asynchrone échoue, la Promettre objet se déplace vers le rejeté état de sa première en attendant Etat. Dans cet état, le raison de l'échec du calcul (c'est-à-dire un message d'erreur) est rendu disponible.

À partir de en attendant à rempli Etat, résoudre() est appelé. À partir de en attendant à rejeté Etat, rejeter() est appelé.

le puis et capture les méthodes

Quand l'état changements de en attendant à rempli, le gestionnaire d'événements du Promettre objets puis méthode est exécuté. Et quand l'état changements de en attendant à rejeté, le gestionnaire d'événements du Promettre objets capture méthode est exécuté.

Exemple 1

“Non promis” code

Supposons qu'il y a un bonjour.txt fichier contenant le “Bonjour” mot. Voici comment nous pouvons écrire une demande AJAX à aller chercher ce fichier et montrer son contenu, sans utiliser le Promettre objet:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (this.response); Pause; cas 404: lancer 'Fichier non trouvé'; défaut: throw 'Impossible de récupérer le fichier';  catch (err) console.log (err);  getTxt (); 

Si le contenu du fichier a été récupéré avec succès, c'est à dire. le code d'état de réponse est 200, le texte de la réponse est écrit dans le document. Si le fichier est non trouvé (statut 404), une “Fichier non trouvé” Un message d'erreur est lancé. Sinon, un message d'erreur général indiquant que la récupération du fichier a échoué.

“Promis” code

Maintenant Promisify le code ci-dessus:

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

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

Quand le le code d'état de la réponse est 200, la Promettre est rempli par appel résoudre() (la réponse est passée comme paramètre de résoudre()). Lorsque le code de statut est 404 ou un autre, le Promettre est rejeté en utilisant rejeter() (avec le message d'erreur approprié comme paramètre de rejeter()).

le gestionnaires d'événements pour le puis() et capture() les méthodes du Promettre objet sont ajouté à la fin.

Quand le Promettre est rempli, le gestionnaire de la puis() La méthode est exécutée. Son argument est le paramètre passé de résoudre(). Dans le gestionnaire d’événements, le texte de la réponse (reçu en tant qu’argument) est écrit dans le document.

Quand le Promettre est rejeté, le gestionnaire d'événements du capture() la méthode est exécutée, enregistrer l'erreur.

le principal avantage de la version promisifiée ci-dessus du code est le la gestion des erreurs. Au lieu de lancer des exceptions non capturées - comme dans la version non promisifiée - le messages d'échec appropriés sont retournés et connectés.

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

Exemple 2

“Non promis” code

Au lieu de simplement afficher le texte de bonjour.txt, je veux combinez-le avec le “Monde” mot et l'afficher à l'écran après une pause de 2 secondes. Voici le code que j'utilise:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (concatTxt (this.response)); Pause; cas 404: lancer 'Fichier non trouvé'; défaut: throw 'Impossible de récupérer le fichier';  catch (err) console.log (err);  function concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

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

Mais ce code ne fonctionnera pas comme souhaité. le setTimeout () fonction de rappel ne peut pas retourner la chaîne concaténée. Ce qui sera imprimé sur le document est indéfini parce que c'est quoi concatTxt () résultats.

“Promis” code

Donc, pour que le code fonctionne, Promisify le code ci-dessus, comprenant concatTxt ():

 function getTxt () retourne une nouvelle promesse (function (résoudre, rejeter) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) cas 200: résoudre (this.response); cas 404: rejeter ('Fichier non trouvé'); défaut: rejeter ('Echec de récupérer le fichier ');;);  function concatTxt (txt) retourne une nouvelle promesse (function (résoudre, rejeter) setTimeout (function () resol (txt + 'World');, 2000););  getTxt (). then ((txt) => return concatTxt (txt);). then ((txt) => document.write (txt);). catch ((err) => console. log (err);); 

Juste comme getTxt (), la concatTxt () fonction aussi renvoie un nouveau Promettre objet au lieu du texte concaténé. le Promettre retourné par concatTxt () est résolu à l'intérieur de la fonction de rappel de setTimeout ().

Vers la fin du code ci-dessus, le gestionnaire d’événements du premier puis() la méthode s'exécute lorsque le Promettre de getTxt () est rempli, c'est-à-dire quand le fichier est récupéré avec succès. À l'intérieur de ce gestionnaire, concatTxt () est appelé et le Promettre retourné par concatTxt () est retourné.

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

finalement, capture() intercepte toutes les exceptions et les messages d'échec des deux promesses.

Dans cette version promisifiée, le “Bonjour le monde” chaîne sera imprimé avec succès au document.