Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

JavaScript : JSON, AJAX et les requêtes asynchrones

Mettre en place BlueBird avec jQuery

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Interfacer BlueBird avec jQuery est assez simple. Cependant, vous devrez faire bien attention aux chaînages.
03:21

Transcription

Pour interfacer « Bluebird » avec « jQuery », il va falloir utiliser, ici, ils ont un petit guide quand on vient d'autres « librairies » notamment de « jQuery ». On va devoir mettre en place la requête qu'on avait avant, à l'intérieur d'une promesse. Pourquoi ? Parce qu'actuellement, il va falloir faire passer le « resolve » et le « reject » qui proviennent de « Bluebird » à l'intérieur de « done » et de « fail ». Voyez que c'est un peu particulier mais vous allez le « wrapper » à l'intérieur, vous allez le mettre à l'intérieur d'une promesse « Bluebird » et, à partir de là, vous allez pouvoir la consommer. Ensuite, la technique est d'utiliser l'objet « Promesse » et de faire un « .all » et de lui donner un tableau avec les différentes promesses que l'on veut résoudre, d'ailleurs on peut en résoudre plusieurs. Ensuite, de câbler des « .then » derrière, sans problème. Faites très attention, pourquoi ? Parce qu'il y a une particularité avec « Bluebird » que l'on n'a pas avec « jQuery », cette particularité est celle-ci : quand vous allez utiliser le « .then » ça va ressembler à cela, vous allez avoir une variable « submitRequest » que je vous conseille d'ailleurs de déclarer plus haut. Cette variable « submitRequest » va être une nouvelle promesse avec « resolve » ou « reject ». Vous allez cabler votre appel « Ajax » en faisant « .done(resolve).fail(reject) » et, ensuite, vous allez démarrer l'objet « Promesse » et vous allez lui dire « all », vous allez lui donner un tableau, ici, avec la première, la « submitRequest » et vous allez câbler. « then(displayObjetc) », « then(displayName) » « then(displayAge) ». « then(displayObjetc) », qu'est-ce que ça fait ? Ça récupère, sur la collection, l'« item1 ». Ça va faire un « console.log » de l« 'item » et ça va retourner l'« item » pour le prochain. « item » ici, va être réutilisé et, enfin, on va retourner l'« item » et il va être encore utilisé par la troisième. Le seul problème, c'est qu'avec « Bluebird » ça ne va pas se passer comme prévu. Pourquoi ? Parce que, regardez, on va simplement remplir l'objet et on va envoyer, et là, la première fois, il nous dit « ok, c'est un objet ». Donc ça, c'est le premier « console.log » qu'on a ici. Là, il nous récupère, à cet endroit-là, un objet mais il nous récupère un objet dans un tableau. Ça veut dire que dans la collection, on a déjà une collection, c'est très particulier mais c'est le « .then » qui fait ça avec « Bluebird » Quand vous allez travailler avec des collections et que vous avez besoin de travailler avec des objets qui sont à l'intérieur, et pouvoir les « mapper », vous allez utiliser, non pas le « then » qu'on a ici petite astuce, mais le « map ». « .map » va, en fait, itérer l'objet et va vous permettre de passer le dernier objet que vous avez donc, ici, c'est la collection complète donc, de récupérer le premier « item » de la collection. Sinon, il va vous faire une collection dans une collection parce que, lui c'est toujours un tableau de base, dans « then » il va vous retourner un tableau avec les réponses. Du coup, vous êtes obligé d'utiliser « map ». Et, ainsi de suite, retourner l'« item » pour l'avoir correctement et enfin, retourner encore l'« item » pour avoir l'âge sans aucun problème. Si vous utilisez « map », vous n'aurez plus de problèmes. Sinon vous allez avoir des « undefined », il ne trouve pas, etc... Vous voyez, l'objet est « wrappé » directement dans une collection, tout le temps. Là, on va recharger, on va renvoyer et on va se rendre compte qu'il n'y a plus de problème. Particularité avec « Bluebird » : utilisez bien « map » si votre réponse est des collections et faites bien attention, quand vous renvoyez à chaque fois, quand vous allez chaîner, utilisez « map » et pas « then » car « then » va être un peu particulier et va vous obligez, à chaque fois, à retourner la collection mais retourner une collection de collections et à chaque fois, chercher l'« item » à l'intérieur, c'est un peu compliqué. Avec « map », vous n'aurez pas ce problème, vous pourrez récupérer le premier « item » et ensuite le passer au fur et à mesure et le travailler correctement et proprement, faire ce que vous avez envie de faire avec.

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 !