Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

JavaScript : JSON, AJAX et les requêtes asynchrones

Utiliser la librairie Q avec jQuery

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
La librairie Q utilisée avec jQuery vous permet de mettre en place des promesses. Vous découvrirez également que les méthodes GET, POST et Ajax ont leur propre système intégré.
07:16

Transcription

Alors, ce qui est intéressant ici avec les promesses, c'est qu'on peut les utiliser avec jQuery. On peut notamment utiliser une librairie qui s'appelle « Q » qui nous permet de traiter de la promesse, et donc de mettre en place des promesses. Alors ici, vous allez pouvoir mettre en place un « Deferred » avec « jQuery.Deferred() », et puis vous pouvez résoudre ce « Deferred » au moment où vous le souhaitez, donc ici, ils les ont mis dans des « Timeout » pour les exemples, et ensuite derrière, vous allez pouvoir faire un « then », donc une fois que ça va être résolu, et attendre que ce soit résolu. Alors, il faut savoir qu'avec jQuery, on a également une librairie qui s'appelle « Q » qui nous permet de travailler proprement avec les promesses. La librairie « Q », on va les trouver ici plus facilement en faisant « jquery Q », et puis vous allez tomber directement dessus, donc « jQuery.when() », etc., donc là, on a vraiment toute l'implémentation de « Q » que l'on peut utiliser. Vous trouverez également une super librairie qui s'appelle « q » sur jQuery qui a été créée par « kriskowal », et en fait ici, donc là, il faut se rendre sur la librairie « q » qui se trouve ici, et vous trouverez quelques petits exemples très intéressants. Notamment, on vous montre ici une pyramide de « Doom », vous voyez, la « Pyramid of Doom », alors il y a même une petite page qui vous explique comment ça fonctionne, et pourquoi il faut pas faire ça, mais c'est concrètement ce dont je vous parlait juste avant, voilà une « step1 », qui va appeler une « step2 », qui va appeler une « step3 », qui va appeler une « step4 », etc. jusqu'à arriver à la fin. Avec « q », vous allez démarrer ici une promesse, vous allez appeler une première fonction, et ensuite, vous allez pouvoir câbler des « then » juste derrière, qui vont nous permettre de gérer la donnée et de la travailler. Alors ce qui est génial, c'est que, et vraiment c'est bien expliqué, on a absolument toutes les informations et toutes les possibilités de cette librairie. Cette librairie, c'est une des librairies qui existent pour les promesses, et ce n'est pas forcément la seule. Alors bien sûr, si vous voulez l'utiliser cette librairie, vous allez passer drectement dans votre fichier ici « yarn », et puis dans votre « package.json », vous allez pouvoir l'ajouter. Alors, comme vous savez pas exactement ce que vous voulez ajouter, le mieux est de passer par le site de « yarn », et d'aller ici sur le site de « yarn », utiliser « Q », et demander la librairie « q ». Alors, vous allez voir qu'effectivement, vous allez voir « q » directement comme ça, ce qui veut dire qu'en toute logique, pour l'installer, vous savez le faire, il va simplement falloir utiliser ici le « add », en mettant « q », et « --save ». En faisant ça, vous allez installer « q », et ensuite évidemment, il va falloir le relier. Donc là, on va recharger de temps en temps, ça rafraîchit pas proprement, on va simplement recharger avec le bouton de rechargement, on va voir qu'effectivement maintenant, on a bien « q » en version 1.5.0, donc on on peut l'utiliser, et il faudra évidemment venir l'ajouter. Juste après « jquery », vous allez rajouter la même chose ici, on va aller chercher « q », on va aller chercher ensuite « q.js » ou « queue.js », donc là, c'est vous qui voyez, mais on va utiliser « q.js », on va recharger, et puis dans notre page, on va aussi recharger la page pour vérifier qu'on a bien maintenant « q » qui est récupéré. Là, c'est installé, on pourrait essayer de l'utiliser, donc tout simplement, en fait ça va être assez simple pour démarrer, on vous dit qu'il faut simplement ajouter le script, et puis à partir de là, vous pouvez déjà démarrer. Donc là, on va pouvoir démarrer une promesse, et puis on va pouvoir faire un « then » dessus sans aucun problème. Si vous avez envie de câbler une promesse, il va falloir obligatoirement, eh bien, travailler avec cette promesse, c'est-à-dire la créer d'abord dans un premier temps, attendre qu'elle se résolve, et ensuite, mettre en place une fonctionnalité. Pour faire ça, il va falloir démarrer votre promesse comme ça : « var outputPromise = getInputPromise() », et puis ensuite vous allez pouvoir utiliser le chaînage derrière et faire pas mal de choses. Donc, il n'y a pas mal de petits exemples ici sur la page, on peut s'amuser à en implémenter une très facilement. Il suffira de suivre les petits exemples que vous avez là, qui vous permettent de travailler, et qui vous permettent d'implémenter. Alors attention, ça ne marche pas automatiquement avec les librairies jQuery, et surtout, avec les librairies qui vous permettent de faire des appels asynchrones. Ça, c'est vraiment si vous voulez en implémenter vous-même. Moi, je vais vous faire un vrai exemple avec une autre librairie qui s'appelle « bluebird » qui est un petit peu plus intéressante. Par contre, vous avez quand même possibilité avec jQuery de traiter des attentes parce que jQuery au niveau de ses « get() » et de ses « post() » peut retourner une promesse. On va regarder sur l'« API Documentation » ici, avec « get() », vous allez voir que effectivement, ici, si on prend « get() », alors celui-là c'est le « DOM », attention, on va prendre « get() » qui est « Ajax », voilà, « HTTP ». On voit que ça, c'est en capacité de nous retourner derrière une « jqXHR », et ça peut aussi nous retourner un petit peu plus loin, on va le voir, ça peut nous retourner une promesse sur laquelle on va pouvoir se câbler. En fait, si vous regardez ici, vous allez avoir des méthodes que vous allez pouvoir utiliser par dessus. Alors, vous voyez que c'est pas la même chose que les promesses réelles, si on regarde la librairie « q », ça va être des « then », si on regarde la librairie ici, jQuery avec sa méthode « get() », ça va être « .done ». Mais ça, c'est déjà une première promesse, c'est-à-dire que plutôt que d'avoir à câbler comme ça, une « Callback » directement à l'intérieur, une fois que vous avez envoyé comme cette façon-là ici là, ben, on pourrait avoir un « get() », et puis qui va ensuite chaîner. Est-ce qu'on peut le faire avec « Ajax » ? Eh bien, on va aller regarder, et je vous invite à chaque fois à bien regarder les documentations, et à surtout, à bien regarder ce qui est possible de faire avec les différentes fonctionalités. De descendre dans les documentations pour voir si c'est possible, et effectivement vous verrez que c'est tout à fait possible d'avoir « .done » également sur « Ajax ». Si j'ai envie de le câbler, eh bien, tout simplement, regardez, je vais le câbler ici, plutôt que de le mettre à la suite, je vais venir câbler ici derrière un « .done », et mon « .done » qu'est-ce qu'il va faire ? Simplement, il va prendre à l'intérieur une fonctionnalité de « Callback », donc je vais aussi enlever mes « success » et mes « error » qui se trouvent ici, et je vais venir câbler ma « success » à la fin une fois que c'est terminé, et ça, ça va fonctionner, ça va vous permettre ici de lancer la « Callback » directement à la suite de l'appel, alors quand vous faites comme ça, je vous conseille, voilà, d'être assez propre, et de travailler de cette façon, c'est-à-dire de venir câbler les différents fonctionnalités, les unes derrières les autres. Là, vous êtes déjà sur de la promesse, puisque vous allez vous attendre à une promesse qui va être résolue, et bien sûr après, l'« API » vous demande d'utiliser « .done » pour lancer une success, ou alors, vous avez aussi un « .fail » qui existe, donc on a des « .done », on a des « .fail », on a les « ..always » qui vont lancer des choses à chaque fois, ça, ça va vous permettre déjà de mettre en place une première promesse. Attention, ici, quand vous allez faire le « .done », on n'a pas possibilité d'utiliser de « hen » derrière, parce que ça marche pas comme ça. Par contre, on vous expliquera qu'il y a quand même pas mal de choses qui sont possibles quand même, et que sur « .done », « .fail » et « .always », on a possibilité quand même d'utiliser « .then ». Par contre, vous ne pourrez pas l'utiliser directement, vous êtes obligés de le chaîner, c'est obligatoire. Le « .then » comme ça ne marchera pas, d'accord, vous devrez faire un « .done » qui ensuite, pourquoi pas, fera un « .then », et là, vous serez sur une « Callback » classique, c'est d'abord « .done » avant d'enchaîner les « .then ». Ici, c'est intéressant parce que vous avez déjà accès à de la promesse.

JavaScript : JSON, AJAX et les requêtes asynchrones

Découvrez les requêtes asynchrones en Javascript avec le format JSON et la norme AJAX. Assimilez les techniques du développement d’applications web en single-page.

2h03 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 mai 2017
Durée :2h03 (30 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !