Promesses en JS
Notes de cours
Travail personnel
Objectifs
L'exercice est une application directe des promesses en JS.
Exercice 1 — Promesses JS #
- Écrire une fonction
getImage(url)
qui prend une URL en paramètre sous forme de chaîne de caractères, et renvoie un élémentimg
dont lesrc
est l'URL donnée. Je précise au cas où qu'il n'est pas question de faire une requête HTTP ici ! - Écrire une fonction
displayDimensions(img)
qui prend un élémentimg
en paramètre et qui affiche ses dimensions (largeur et hauteur) dans la console. - Utiliser ces deux fonctions pour afficher les dimensions de l'image suivante :
https://ensweb.users.info.unicaen.fr/tp/promesses/img/rust_mite.jpg
. Si vous obtenez 0×0, pouvez-vous expliquer pourquoi ? Est-ce toujours le cas si vous actualisez ? Et si vous faites un hard reload (ctrl-maj-R sous Firefox) ? En fait, on voudrait n'exécuter
displayDimensions
qu'après que l'image ait fini de charger. Une solution pourrait être d'ajouter un callback en paramètre degetImage
, mais ici on va utiliser des promesses.Faire en sorte que getImage, au lieu de renvoyer l'image HTML, renvoie une promesse qui se résout en l'image HTML une fois celle-ci chargée (et est rejetée si l'URL est incorrecte). Appeler
displayDimensions
par la méthodethen()
de la promesse renvoyée.- Que se passe-t-il si vous passez une mauvaise URL à
getImage
? Ajoutez uncatch
à la fin de la chaîne, qui affiche l'erreur dans la console. - On vous fournit un service qui renvoie une URL d'image aléatoire :
https://ensweb.users.info.unicaen.fr/tp/promesses/random-image/
. Les images sont utilisables librement, elles proviennent du site PublicDomainPictures.net.Écrire une fonction
getRandomUrl()
qui interroge le service, et renvoie une promesse se résolvant en le résultat de la requête. Tester en faisant une chaîne de promesses avecgetRandomUrl
,getImage
etdisplayDimensions
. - Écrire une fonction
addRandomImage()
qui interroge le service, crée une image et l'ajoute à la page. La fonction doit renvoyer une promesse se résolvant en l'image ajoutée une fois que celle-ci est chargée. On utilisera les fonctions précédemment écrites, d'abord sous forme de chaîne de promesses, puis avecawait
(sans oublier de déclareraddRandomImage
comme étantasync
). - Chaîner quelques appels de
addRandomImage
: on doit voir les images apparaître les unes après les autres. - Lancer plusieurs
addRandomImage
en parallèle, et changer la couleur de fond de la page lorsque tout est terminé.