JavaScript : JSON, AJAX et les requêtes asynchrones

Traiter les retours d'une attente

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce aux promesses JavaScript, enchaînez les actions proprement et documentez-les. Ainsi, vous disposerez d'un système sain.
05:38

Transcription

Alors, on va s'implémenter un petit fonctionnement. Ici, on a notre formulaire, quand je vais le soumettre, pour le moment, c'est la « successCallback » qui va passer c'est-à-dire celle qu'on avait mis ici, d'accord, alors on pourrait, celle-ci, si on le souhaite, l'appeler « success » tout simplement, « .donnesuccess », alors si vous avez envie d'être encore plus verbeux, vous pourriez dire : « callSuccess », comme ça, « .done(callSuccess) » et ça vous permet de mettre en place quelque chose de propre, une vraie hiérarchie. Ensuite, qu'est-ce qu'on pourrait faire ? Par exemple, on pourrait lui demander de nous récupérer, ici, pourquoi pas, le premier objet. Parce que qu'on voit que ce qui va arriver ici, ça va être l'information de la collection. Donc, cette collection, moi, je l'ai, OK ? Donc ça, il faut que je pense d'abord, ici, à faire un « return » de « response » qui va être la collection. Si je sais que c'est une collection, je vais surtout mettre collection, ici, pour essayer d'être le plus verbeux possible et ensuite, je vais me faire un « then » « displayName » , par exemple. Qui va être égal à quoi ? Qui va être, en fait une fonction également, d'accord ? Qui va prendre la collection ici et qui va me faire un « console.log » du premier objet, par exemple. Dans un premier temps, on va afficher le premier objet, « (collection[0]) », donc, si on n'a pas évidement, il faudra faire un traitement pour vérifier ça. Donc là, pour le câbler, on va utiliser « then » et on va lui mettre « displayName ». Là, dans un premier temps, on va avoir ça. Qu'est-ce qui va se passer, je vais soumettre, il va récupérer la collection, l'envoyer sur l'autre et me faire un « display » de l'objet. Là, on vient d'enchaîner déjà une première action. On peut ensuite en enchaîner une autre, ce n'est pas un problème, on pourrait lui dire ici : « displayObject » donc l'objet, on est Ok, voilà « displayObject ». Ce qu'on va faire, c'est qu'on va ici faire une « var item = collection[0] », on va aussi faire un « console.log(item) » et on va pas oublier de faire un « return » de l'« item », pourquoi est-ce que je retourne ici l'« item » ? Parce qu'il faut que cette fonction retourne quelque chose pour que la prochaine puisse récupérer l'objet. Là, je vais aussi me faire, du coup, un « var displayName = fonction [item] » ce que la fonction du dessus m'a retourné, qui va me faire un « console.log(item.) » et on va aller regarder les propriétés qu'on avait mises dedans : « first_name » par exemple, «.first_name » et puis, on va faire un petit plus comme ça et il va faire « + item.last_name ». donc, ça veut dire qu'on passe d'une collection tout en haut sur la réponse à la suite et la suite, qu'est-ce que c'est ? Tout simplement, la suite, ça va être d'afficher le nom, alors, ça pourrait être plein de trucs, on pourrait s'amuser, simplement, à récupérer l' « item », le retravailler et puis ensuite, l'envoyer ailleurs et faire comme ça, ainsi de suite, sans aucun problème. Donc là, je peux encore câbler un « then », ici, « displayName ». Donc là, je vais avoir les actions successives qui vont s'effectuer les unes derrière les autres. Alors, on dit que, attention, on peut pas lire la propriété zéro de quelque chose d'indéfini. Alors, on va regarder pourquoi. Là, vous avez « retourner la collection ». Ce qui faudrait faire pour « debugger » ici, ce serait faire un petit « console.log(collection) » et il faudrait vérifier qu'on colle bien « success » et ici, vous voyez, voilà, c'est pour ça, on a fait un « displayName » à cet endroit-là, il faut l'enlever. Pourquoi ? Parce que on fait un « displayObject » d'abord et lui, il n'a pas encore reçu l'« item », donc pour le moment, ça marchera pas. Là, effectivement, ça va refonctionner. Faites attention quand vous faites un peu de « refactoring » et que vous améliorez, sinon ça marche pas. Donc là, première action, on a bien l'objet. Deuxième action, on récupère bien son nom et si on veut enchaîner une autre action qui, par exemple, nous donne l'âge, par exemple, le « displayAge », donc là, on va faire « display » comme ça et puis, on va ajouter « age » qui va être une fonction, alors, soit je lui passe du coup l'« item », soit je lui passe l'âge directement. Si je veux lui passer l'âge directement, c'est pas un problème et ça veut dire que ici, je dois faire un « return » de « item.age ». Et ça, c'est jouable, on a le droit de faire ça puisqu'on a l'information dans l'objet, donc on a le droit de faire ça. Ici, ça va consommer la « callBack » d'avant, donc l'âge et ça va me permettre de pouvoir l'afficher « return », ici, on va faire un « return console.log(age) » et on va enregistrer cette partie-là et si on va venir, ici, le câbler : « then displayAge », on n'a pas de problème pour faire ça, on peut enchaîner les actions. Alors, faut faire attention parce que à partir de là, j'ai plus l' « item », à partir de là, je n'ai plus qu'une chaîne de caractères qui est l'âge et je peux plus rien faire d'autre que d'afficher les bonnes informations, donc l'âge en fait, ici, après, si j'enchaîne derrière, j'ai plus que l'âge. Donc, Il faut faire attention à comment on va enchaîner des actions, par contre, vous voyez qu'ici, on se retrouve avec un appel qui est extrêmement propre, on sait que ça va récupérer l'info, ça va appeler le « success », ça va « display » l'« object », le « name » et l'âge. Et du coup, on se retrouve avec quelque chose de propre, des actions successives les unes au-dessus des autres et y a même mieux que ça, on pourrait se dire qu'on va commenter les différentes fonctionnalités, comme ça pour venir mettre de l'information et ça, vous pouvez ajouter des commentaires à chaque fois sur chacunes de vos « Callback » pour documenter le code, ce qui fait que vous allez vous y retrouver beaucoup plus quand vous aurez comme ça une documentation propre de ce que ça fait et comme ça, vous pourrez aller sur une « callback » pour voir ce qui est fait avec de la documentation à chaque fois et vous allez obtenir un code beaucoup plus propre que si vous faisiez un enchaînement de fonctions qui n'ont pas de sens et qui ne veulent rien dire.

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

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 !