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

Découvrir Ember.js

Découvrir les tâches asynchrones et les promesses

Testez gratuitement nos 1338 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour aller plus loin, découvrez ce que sont les promesses. Il s'agit de tâches asynchrones gérées automatiquement par Ember.js.
06:38

Transcription

Jusqu'à présent, nous avons utilisé plusieurs requêtes pour charger des données depuis le serveur et même lui envoyer des modifications, mais j'aimerais vous expliquer un petit peu ce qui se passe quand il y a ce genre de requête, ce qu'on appelle des tâches asynchrones. Prenons par exemple cette ligne de codes. Rappelez-vous, c'est la fonction model de la route groups qui va demander à obtenir la liste de tous les groupes présents sur le serveur. Comme vous pouvez l'imaginer, cette action risque d'être longue. Pourquoi ? Parce qu'il va devoir construire l'URL, demander au serveur, donc ça veut dire ouvrir une connexion avec le serveur. Le serveur va peut-être charger des données en interne, je ne sais pas combien de temps il va prendre pour répondre, et une fois qu'il aura répondu,ça va fournir dugisson qui doit être passé, enfin il y a vraiment des tas de choses qui doivent se passer. Le plus long va vraiment être la phase de communication avec le serveur, qui passe par Internet, et donc on ne sait pas, en fonction de la connexion qu'on a et de la vitesse du serveur, ça peut prendre un certain temps. Donc cette fonction ne peut pas retourner un résultat instantané. La première possibilité aurait été de dire : OK, on va bloquer toute l'exécution du code jusqu'à ce qu'on ait le résultat, et puis on obtient un résultat en synchrone. Sauf que ça, c'est rarement une bonne idée, parce que du moment qu'on parle de bloquer l'exécution du code, ça veut dire qu'il ne se passe rien d'autre dans toute l'application. Ce Donc tout est figé le temps qu'on récupère ça. Je Ce n'est pas forcément ce qu'on veut, surtout que, là encore on est dans une transition de route, ce n'est pas super grave, même si c'est quand même embêtant, mais si on avait été dans une page, par exemple ce qu'on faisait quand on parcourait la liste des contacts, qu'on avait déjà chargé la page et qu'on récupérait les contacts pour les ajouter, tout bloquer le temps d'avoir fini les chargements, ça serait quand même problématique. Donc ce que fait Ember, il fait ce qu'on appelle une promesse. Une promesse, en fait, c'est : au lieu d'attendre et de retourner à un résultat final, il va retourner instantanément une promesse. Ce une promesse, c'est un objet qui contient toutes les informations sur ce qui est en train de se passer au niveau réseau pour cette requête là. C'est justement la promesse que plus tard, il y aura un résultat. Et donc ce qui est retourné, c'est un objet promesse ; le chargement va s'effectuer, et une fois que le chargement sera terminé, les données vont être insérées dans la promesse. Donc la promesse contiendra à terme la véritable liste des groupes. Mais au moment où on arrive ici, cette promesse est vide. Donc on lui retourne une promesse et ça reste qu'une promesse. Alors le terme en anglais, c'est fulfilled, c'est la propriété qu'on va utiliser. Il n'a pas encore réalisé et résolu sa promesse, donc pour l'instant, il vous retourne une promesse. Donc ça permet d'aller très très vite et quand vous allez utiliser ensuite cette promesse dans les templates, vous n'avez pas trop à vous en préoccuper, c'est géré automatiquement par les templates. C'est pour ça que jusqu'à présent je ne vous en avais pas parlé, pour ne pas complexifier les choses, mais je voulais au moins que vous compreniez, puisque, en fonction de ce que vous aurez à faire par la suite, il se peut que vous y soyez confrontés. Donc du moment que vous utiliserez les templates, ça ne change pas grand-chose pour vous, c'est bon de le savoir que c'est une promesse, mais en réalité ce qui se passe derrière, c'est qu'il va charger cette promesse et puis une fois qu'elle sera complètement chargée, il va insérer lui-même les données dans le template. D'ailleurs, il faut savoir que quand on est dans une route, c'est-à-dire que c'est un petit peu particulier quand c'est le modèle d'une route, quand vous retournez une promesse, la transition se bloque. C'est-à-dire qu'il va effectuer du code, mais il va attendre que la promesse soit résolue pour finir sa transition. Et c'est d'ailleurs comme ça qu'il est capable de nous envoyer vers la route de chargement, vous vous rappeler, la route loading, parce que justement il a retourné une promesse, donc il s'est rendu compte qu'il ne pouvait pas finir sa transition mais qu'il y avait une autre route, donc pendant que la promesse se déroule, il est capable de nous rediriger vers une autre route. C'est un des avantages, justement, de ne pas bloquer le code. Il est capable de faire autre chose en attendant. Et une fois que la promesse est résolue, il va arrêter la route de chargement et il va revenir et reprendre la transition là où il s'était arrêté, pour finir, créer le template, faire passer les données qu'il a récupérées dans la promesse, etc. Donc pour les templates, on n'a pas trop à s'en préoccuper. Là où ça peut être intéressant pour vous, ça va être de savoir que dès que vous allez faire des requêtes asynchrones dans votre code, il y aura aussi une promesse. Un exemple, ce sera celle-ci : quand on a décidé par exemple de créer un nouveau groupe, donc en crée un nouvel objet ici, là il est en local, donc il n'a pas encore été envoyé au serveur, mais dès que vous faites .save, le save, ça va effectivement effectuer une sauvegarde au niveau du serveur, mais ça va vous retourner un objet promesse. Nous on l'a ignoré, on n'est pas obligé de s'en servir. Mais ça peut être super intéressant de savoir si la sauvegarde a marché ou pas. Donc ce qu'on va pouvoir faire dès que vous avez un objet promesse, vous ne pouvez pas directement modifier les données, alors, c'est le nom officiel dans la documentation d'Ember, promise, donc dès que je vais faire un appel à la fonction save, ça va me retourner une promesse qui va me permettre de suivre un petit peu l'avancement et surtout le résultat. Dès que vous avez un objet promesse, ce qu'il est impossible de faire, c'est de modifier l'objet en interne. C'est-à-dire que je ne peux pas aller dire : sur cette promesse je veux aller modifier le titre de mon groupe ou l'email ou autre, puisque finalement, je n'ai pas encore le résultat final. Le save qui est ici va envoyer les données que je lui ai créées au-dessus au serveur, le serveur, lui, va peut-être soit accepter ces données soit les modifier, ou peut-être en ajouter d'autres et retourner un objet groupe complet, avec un id, avec... vous voyez, je n'ai pas fourni d'id, mais le serveur va m'en retourner un. Donc ce save, en fait, il va permettre ensuite, une fois que le serveur aura répondu cette promesse, elle va mettre à jour l'objet groupe qu'on vient de créer pour ajouter ce que le serveur nous aurait retourné pour de vrai. Donc là, nous ce qu'on peut faire sur la promesse, c'est deux choses. Vous avez une seule fonction, qui s'appelle then, en tout cas, c'est la fonction principale qu'on utilise sur les promesses, et elle reçoit deux paramètres. Les deux sont facultatifs. Le premier, ça va être une fonction avec l'objet réel qui a été téléchargé par la promesse. Une fois qu'il a terminé, si tout s'est bien passé, il appellera cette fonction. En gros, le save est accepté par le serveur, il y a un retour 200 du serveur, donc il est d'accord. Et voici ce que le serveur m'a retourné comme objet. On peut décider de faire une alerte ou faire ce qu'on a envie. Deuxième paramètre : ça sera, s'il y a eu une erreur, en gros, on n'a pas réussi à joindre le serveur, ou le serveur a retourné un code 500, par exemple, ou 404, un code d'erreur, on a les infos qui arrivent ici, dans une deuxième fonction, avec en paramètre l'erreur qui a été retournée. Donc vous avez un moyen, après chaque save, et après chaque promesse, que ce soit un save, ou un find, ou un query, peu importe le type de requête réseau que vous allez faire, vous avez un moyen de savoir comment s'est passée cette promesse et de faire des actions par la suite. Ça va être important si vous souhaitez, par exemple, modifier cet objet après qu'il a été sauvegardé par le serveur, vous ne pouvez pas le modifier juste après avoir appelé save, parce qu'à ce moment-là, on n'a pas encore accès à l'objet final, par contre, ici, on peut dire une fois que je suis dans le then, ça veut dire : le serveur a accepté et m'a créé un nouvel objet et mon groupe est bien modifié, je peux dire group.set. Je peux définir d'autres paramètres et modifier encore et sauvegarder ce groupe, parce que là, j'ai quelque chose de valide. Ça se fera plus tard dans le temps, le then ça veut dire : « ensuite ». Donc du coup, ce code là sera exécuté quelque secondes plus tard, tout dépend de la vitesse du serveur, mais ce code là sera exécuté un petit peu plus tard que le moment où on arrive sur l'appel de la fonction then. Voilà, c'est un petit peu plus complexe à gérer, je voulais juste que vous le sachiez. A priori, vous en aurez très peu besoin. Essayer de comprendre au moins ce principe pour savoir comment ça marche.

Découvrir Ember.js

Créez vos composants et mettez en page vos sites avec une facilité déconcertante avec Ember.js. Apprenez à créer des routes et à charger vos modèles depuis un service web externe.

2h57 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 mars 2016

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 !