Promouvoir les API Web héritées Just for Fun

Nous allons passer en revue les bases des promesses et des rappels et démontrer la simplicité de promesse de l'ancienne API XMLHttpRequest.

Il n'est plus d'actualité que les nouveaux modèles de développement de JavaScript, depuis l'évolution de l'ES6, ont influencé la façon dont nous abordons certains choses dans l'écosystème JavaScript. Par exemple, la syntaxe standard de la fonction de rappel, utilisée depuis des années. Cependant, une nouvelle alternative, Promises, constitue désormais un modèle de développement plus préféré.

Promises

Les promesses représentent un moyen courant de réagir aux opérations asynchrones en JavaScript. La nouvelle API fetch fournie par les navigateurs est un bon exemple d’API reposant sur Promise. Non pas que vous ne le sachiez pas déjà, mais fetch remplace l’ancienne API XMLHttpRequest basée sur les rappels et nous en examinerons quelques-uns. façons de promettre certaines de nos anciennes API simplement pour le plaisir. ?

Callbacks

Commençons par des rappels simples. À mon avis, l'API de navigateur la plus courante que nous rencontrons est l'API setTimeout () . Il attend pendant une période spécifiée, puis exécute un rappel. Voici une démonstration typique:

 fenêtre .  setTimeout  ( ()   =>   {
    

  
} . 1000 ) ; 

Comme prévu, la fonction attend une seconde, puis s'exécute. Dans cet esprit, voyons comment nous pouvons le promettre pour comprendre comment Promises clarifie mieux les processus asynchrones.

Promisify a Callback

Pour définir une promesse conforme à A + à l'aide du constructeur Promise, nous allons passer un fonction au constructeur. La fonction nécessite deux arguments, résoudre et rejeter qui sont elles-mêmes des fonctions de rappel sous le capot. C’est ce que nous voulons dire:

  const   promisifiedSetTimeout   =   ( retard  valeur )   => 
    
 nouveau   Promise  ( ( résoudre )   =>  window .  setTimeout  ( résolution [ résolution  delay  value ) ) ; 

Notez que nous n'avons pas utilisé le rappel rejeter ici. Pourquoi? Parce que setTimeout () ne fournit pas de points d'ancrage pour un état d'erreur. Donc, au lieu de cela, nous passons à résoudre en tant que rappel à la fonction setTimeout () .

Cela nous donne une chaîne setTimeout () chaînable. Bien que ce soit amusant de faire ce genre de choses (promesses de rappel), je vous conseillerai de ne pas vous laisser emporter. De nombreuses API JavaScript et la plupart des API de navigateur standard sont toujours fortement appelées. Cela inclut des bibliothèques populaires telles que jQuery.

En tant que développeur, cela nous amène à un carrefour où nous sommes mélangés entre le mélange de deux styles différents de code asynchrone.

XMLHttpRequest

Mais qui dit que nous pouvons " convertissez-vous tous nos rappels en promesses? Examinons un exemple plus complexe et promettons la populaire API XMLHttpRequest . Mais avant cela, démontrons la fonctionnalité pour mieux la comprendre.

L’API XMLHttpRequest a été conçue pour extraire des données XML sur HTTP, d’où son nom. Mais aujourd'hui, il peut être utilisé avec des protocoles autres que HTTP et récupérer des données non seulement sous forme XML, mais aussi JSON, HTML ou texte brut. Voici un exemple rapide utilisant la fonction XMLHTTPRequest pour rechercher un utilisateur Github:

  function   success  ()  {
 var .  =  JSON .  parse  ( cette .  réponse ) ; 
console .  log  ( données ) ; 
} 
  
 fonction   erreur  ( err ). 19659009] {
console .  log  ( 'Vous avez une erreur'  err ) 
} 
  
 var  request  =   new   XMLHttpRequest  () ; 
demande .  onload  =  succès ; 
request .  onerror  =  error ; 
request .  open  ( 'GET'   'https://api.github.com/users/kennypee' ) ; 
request .  send  () ; 

Nous avons défini ici notre requête que nous utiliserons pour extraire des données du serveur de manière asynchrone. La demande renvoie une réponse du serveur et la stocke dans la variable de réponse . Nous avons également converti la réponse en objet JavaScript à l'aide de la méthode JSON.parse () . De plus, nous avons défini deux écouteurs pour gérer les cas de réussite et d'erreur.

La progression est la suivante: nous ouvrons d'abord la requête en passant la méthode de requête GET et l'URL de la requête où nous allons chercher les données depuis, puis nous envoyons la demande avec l'appel à send () .

Si notre demande aboutit, nous stockons les données du serveur dans notre variable de réponse . convertissez-le en objet, puis connectez-le à la console. S'il y a une erreur dans notre requête, nous enregistrons l'erreur dans la console à l'aide du gestionnaire de cas error () .

Ceci nous ramène à notre question initiale: existe-t-il un moyen plus simple et plus simple de fais ça? La réponse est oui. Nous pouvons utiliser Fetch pour simplifier ce processus dans le développement JavaScript moderne. L'extraction est une amélioration de l'API XMLHttpRequest . La principale différence entre Fetch et XMLHttpRequest réside dans le fait que l'API Fetch utilise Promises, évitant ainsi le rappel en enfer.

Fetch

La fonction de fetch () prend un argument obligatoire, lequel est le chemin d'accès à la ressource que vous voulez récupérer. Les fonctions renvoient une promesse dans tous les cas, que ce soit une erreur ou un succès. Il a des gestionnaires dédiés pour les deux cas. Si la demande aboutit, la fonction .then () recevra l'objet de réponse du serveur. si la requête échoue, la fonction .catch () reçoit l'objet d'erreur.

Si nous voulions obtenir la même fonctionnalité que celle de l'exemple précédent avec Fetch, voici ce que nous ferons: 19659007] fetch ( 'https://api.github.com/users/kennypee' )
. puis (fonction [19659509] . ] ( response ) ) {
return response . json ()
} )
. puis ( fonction ( données ) ) {
console . log ( données )
} )
. capture ( fonction ( err ) ) {
console . log ( "Vous avez une erreur" err )
} ) ;

Ici nous avons fait la même chose que nous avons fait avec le XMLHttpRequest mais d'une manière beaucoup plus simple. Nous avons utilisé l’API Fetch pour appeler le point de terminaison GitHub et récupérer des données sur un utilisateur. Lorsque la promesse est résolue, nous obtenons un objet Response en retour

mais l'objet response ici ne contient que des informations sur la réponse elle-même et non sur l'utilisateur que nous avons demandé. Pour obtenir les données souhaitées, nous avons dû les extraire du corps de la réponse en appelant la méthode .json () sur l'objet de réponse pour retourner une promesse, d'où la nécessité d'en chaîner une autre .then () Fonction pour les données .

Promisifiez l'API XMLHttpRequest

Maintenant que nous avons vu un XMLHttpRequest non dilué et présenté en exemple . ] version de la même API, essayons de promettre l'API XMLHttpRequest . Ce sera davantage un mélange des API XMLHttpRequest et Fetch . Pour promettre notre exemple précédent de l'API XMLHttpRequest voici les étapes à suivre:

1. Supprimez les arguments d'erreur success et dans la signature de fonction .
2. Modifiez le corps de la fonction pour renvoyer une promesse.
3. Au lieu d'appeler success () résolvez la promesse.
4. Au lieu d'appeler error () rejetez The Promise.

Grâce à ces modifications, nous pouvons promettre notre API XMLHTTPRequest pour obtenir le résultat ci-dessous:

  const  fetch  =   ( url  options  =   { méthode :  'get' } )   =>   nouveau   ] Promesse  ( ( résoudre  rejeter )   =>   {
     soit  demande  =   new   XMLHttpRequest  () [1 9659009]; 
    request .  onload  =  résoudre
    demande .  onerror  =  rejeter ; 
    request .  open  ( options .  method  url   true ) ; 
    demande .  send  () ; 
} ) ; 

Il s’agit d’une manière concise de promettre le . ] API sans avoir à réécrire le code existant. De plus, nous pouvons toujours remplacer toutes les anciennes fonctions de rappel par les nouvelles syntaxes .then () et .catch () là où le besoin s'en fait sentir.

Cela pourrait également vous intéresser sachant que, depuis la version 8 de Node.js, vous pouvez convertir tous vos rappels en promesses à l’aide d’un module intégré appelé util . Il vous suffit d'appeler util.promisify () pour convertir votre rappel en promesse.

Conclusion

Ce n'est pas que vous ne sachiez pas tout cela, mais j'espère que vous vous êtes amusé à le faire. tout recommencer pour renforcer la connaissance. Nous avons démontré la conversion des rappels habituels en promesses et du XMLHttpRequest to Fetch plus populaire, rien que pour le plaisir. Pour en savoir plus sur Promises, n'hésitez pas à consulter cette documentation .

Pour plus d'informations sur la création d'excellentes applications Web

Vous souhaitez en savoir plus sur la création d'applications Web exceptionnelles? Tout commence avec Kendo UI - la bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

En savoir plus sur le Kendo UI

Testez gratuitement Kendo UI