Promesses en JS

Master Internet, Données et Connaissances

Alexandre Niveau

Enseignement des technologies du Web

 

Promesses en JS

Notes de cours

Travail personnel

Objectifs

L'exercice est une application directe des promesses en JS.

Exercice 1 — Promesses JS #

  1. Écrire une fonction getImage(url) qui prend une URL en paramètre sous forme de chaîne de caractères, et renvoie un élément img dont le src est l'URL donnée. Je précise au cas où qu'il n'est pas question de faire une requête HTTP ici !
  2. Écrire une fonction displayDimensions(img) qui prend un élément img en paramètre et qui affiche ses dimensions (largeur et hauteur) dans la console.
  3. 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) ?
  4. 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 de getImage, 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éthode then() de la promesse renvoyée.

  5. Que se passe-t-il si vous passez une mauvaise URL à getImage ? Ajoutez un catch à la fin de la chaîne, qui affiche l'erreur dans la console.
  6. 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 avec getRandomUrl, getImage et displayDimensions.

  7. É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 avec await (sans oublier de déclarer addRandomImage comme étant async).
  8. Chaîner quelques appels de addRandomImage : on doit voir les images apparaître les unes après les autres.
  9. Lancer plusieurs addRandomImage en parallèle, et changer la couleur de fond de la page lorsque tout est terminé.