UNIVERSITE GASTON BERGER DE SAINT-LOUIS

Programmation Web avancée

Compléments à la programmation web

Awa DIATTARA
[Link]@[Link]

23/12/2021
Le langage JavaScript
Les promesses

2
 Les promises ?

Les promesses ne sont pas récentes. Elles ont commencé à

apparaître dans les années 80 dans des langages tels que
MultiLisp.

Le JavaScript a depuis quelques années une tendance à baser

les nouveautés du langage sur des modèles asynchrones car
cela permet au moteur JavaScript de gérer en même temps
événements, affichage, interrogation de base de données,… et
de conserver une interface réactive.

Bien que les promesses existent depuis longtemps dans

l'écosystème JavaScript, l'objet Promise permettant de les gérer
a été introduit récemment avec l'ES6 (un nouvel objet natif).

DIATTARA Awa Compléments à la programmation web

 Les promises ?

Les promesses sont donc des objets qui retournent la valeur

d’une opération asynchrone (complétion ou échec), autrement
dit elles représentent une valeur future.

Elles disposent de méthodes permettant de traiter le résultat

une fois l’opération accomplie (then() et catch()).

D’une manière générale, les promesses vont nous permettre de

nous affranchir des fonctions callback, qui sont désormais
attachées à la promesse.
o L’inconvénient des fonctions callback est qu’elles rendent le
code difficile à lire et donc difficile à maintenir

DIATTARA Awa Compléments à la programmation web

 Les promises ?

Il existe 3 états possibles pour une promesse :

o résolue (fulfilled en anglais) : la valeur de la promesse est

arrivée et est utilisable. La fonction resolve() est appelée.
o rejetée (rejected en anglais) : une erreur est survenue et il
est possible d’effectuer une action en réaction à cette erreur.
La fonction reject() est appelée.

o en cours (pending en anglais) : la valeur contenue dans la

promesse n’est pas encore arrivée.

Une fois la promesse résolue ou rejetée, elle ne peut plus

changer d’état

DIATTARA Awa Compléments à la programmation web

Le langage JavaScript
Mise en œuvre d'une promesse

6
 Les promises ?

La classe Promise

o Elle attend en paramètre une fonction qui prend deux

paramètres :
o Resolve() : la fonction à appeler quand la tache
asynchrone a réussie et est finie.
o Reject() : quand la tâche asynchrone a échoué ou ne
peut pas être exécutée.

DIATTARA Awa Compléments à la programmation web

 Les promises ?

La classe Promise

o Une promesse dispose de la méthode then qui accepte en

paramètre une méthode callback fournissant le traitement à
réaliser à la fin de la tâche, c’est-à-dire lorsque la méthode
resolve() sera appelée.
o La fonction callback recevra en paramètre l’objet passé en
paramètre de la méthode resolve().

DIATTARA Awa Compléments à la programmation web

 Les promises ?

La classe Promise

o Si la tache échoue et que c’est la méthode reject() qui est

appelée, alors on peut utiliser la méthode catch pour
préciser le traitement à appliquer lors de l’échec.
o Cette méthode attend une fonction callback qui recevra en
paramètre le message passé en paramètre de la méthode
reject().

DIATTARA Awa Compléments à la programmation web

Utilisation de AJAX
Exemples de promesse

10
 Les promises : déclaration d'une promesse

Pour déclarer une promesse, il faut utiliser l'objet Promise.

On peut utiliser une fonction dans laquelle on insère un return
d'une nouvelle instance de l'objet Promise.

A ce stade la promesse est créée mais n'est pas encore

exploitable. Elle contient ici une fonction anonyme avec 2
paramètres : resolve (fonction qui sera exécutée si la promesse
s'est bien déroulée) et reject (fonction utilisée pour indiquer le
traitement à faire l'erreur en cas d'échec de la promesse).
DIATTARA Awa Compléments à la programmation web
Les promises : déclaration d'une promesse

Exemple complet

DIATTARA Awa Compléments à la programmation web

Les promises : utilisation d'une promesse

Exemple

La fonction anonyme dans la méthode "then" correspond à la

fonction resolve de la promesse.
La méthode "catch" correspond à la fonction reject
Si on insère un paramètre dans la fonction de la méthode "then"
on récupère celle qui est dans la fonction resolve.

DIATTARA Awa Compléments à la programmation web

Les promises : utilisation d'une promesse

Exemple :

Si on avait changé le paramètre de la fonction "salutation" par

autre chose que "bonjour", la fonction "reject" de la promesse
aurait été exécuté et le message "Vous n'avez pas salué" aurait
apparu.
DIATTARA Awa Compléments à la programmation web
 Les promises : chaînage de promesses

Le chainage des promesses en Javascript permet d'attendre le

résultat d'une promesse pour ensuite l'utiliser dans une autre
promesse et ainsi de suite.

Pour bien comprendre ce principe nous allons utiliser quatre

promesses relativement identiques. Pour simuler une opération
asynchrone nous allons utiliser la méthode "setTimeout" qui
permet d'exécuter un code au bout d'un nombre de
millisecondes.

DIATTARA Awa Compléments à la programmation web

Les promises : chaînage de promesses

Exemple : chaînage de plusieurs promesses

 4 promesses qui exécutent la fonction "resolve" au bout de x millisecondes.

• promesse1 : 3000 millisecondes (3 secondes)
• promesse2 : 2000 millisecondes (2 secondes)
• promesse3 : 1000 millisecondes (1 secondes)
• promesse4 : 500 millisecondes (0,5 secondes)
DIATTARA Awa Compléments à la programmation web
Les promises : chaînage de promesses

Exemple : utilisation de plusieurs

promesses sous forme d'une chaîne

 La première promesse est exécutée.

 Au bout de 3 secondes la première
méthode "then" est appelée. Cette
méthode contient un "return" de la
deuxième promesse qui est alors exécutée.
 Au bout de 2 secondes la deuxième
méthode "then" est exécutée. Et ainsi de
suite jusqu'à la quatrième promese.

DIATTARA Awa Compléments à la programmation web

Les promises

Autres exemples

Exemple de sortie : Exemple de sortie :

DIATTARA Awa Compléments à la programmation web

Les promises

Exemple avec des

paramètres:

Exemple de sortie
DIATTARA:Awa Compléments à la programmation web
 Opérations asynchrones en parallèle

Quelquefois nous avons besoin d'utiliser plusieurs promesses

en JavaScript mais sans le chainage de celles-ci.

Ce qui est possible de faire dans ce cas là c'est de lancer des
opérations asynchrones en parallèles grâce aux promesses et
ensuite attendre que toutes les opérations soient terminées
pour utiliser les résultats.

Pour ce faire, on peut utiliser la méthode "all" de l'objet Promise.

DIATTARA Awa Compléments à la programmation web

 Opérations asynchrones en parallèle
Exemple :

 Toutes les promesses sont exécutées chacune de leurs cotés (par exemple
la deuxième promesse commence son activité en même temps que la
première, elle n'attend donc pas que la première soit terminée comme dans
le cas du chainage de promesses).
 Lorsque les promesses sont toutes terminées chacune de leurs cotés, le
code dans "then" est exécuté

DIATTARA Awa Compléments à la programmation web

 Chaînage ou exécution en parallèle

Comment choisir entre un chaînage de promesses ou une

exécution de promesses parallèle?

Tout dépend de votre objectif…

o Si les promesses ont absolument besoin des résultats

d'autres promesses il faut utiliser la méthode du chainage.

o Sinon la méthode qui permet de mener des opérations en

parallèles sera plus adéquate car plus rapide dans son
exécution.

DIATTARA Awa Compléments à la programmation web

 Exercice d'application

En utilisant [Link](), créez une promesse qui renvoie un

nombre aléatoire compris entre 0 et 1. Lorsque le nombre
aléatoire généré est inférieur à 0,5, affichez le message suivant :
"Bravo !!! Bien joué ", sinon affichez le message "Courage !!!
cherchez encore !!!

DIATTARA Awa Compléments à la programmation web

Utilisation de AJAX
Async / await

24
 Async / await

Les mots clés async et await sont un sucre syntaxique ajouté

au JavaScript pour nous permettre d'écrire du code
asynchrone.

ils n’ajoutent aucune fonctionnalité en soi mais fournissent une

syntaxe plus intuitive et plus claire pour définir des fonctions
asynchrones et utiliser des promesses.
Utiliser le mot clé async devant une fonction force la fonction à
retourner une promesse et nous permet d’utiliser await dans
celle-ci.

En utilisant le mot clé await devant une promesse, on oblige le

JavaScript à attendre que la promesse soit consommée. Si la
promesse est résolue, le résultat est retourné. Si elle est
rompue, une erreur (exception) est générée.
DIATTARA Awa Compléments à la programmation web
 Async / await

Exemple :

 Exemple de sortie :
DIATTARA Awa Compléments à la programmation web
 Async / await

Exemple :

DIATTARA Awa Compléments à la programmation web

 Utilisation de AJAX
API Fetch et sa méthode fetch()

28
 L'API Fetch

L'API Fetch et sa méthode fetch() constitue la nouvelle façon

d'effectuer des requêtes HTTP.

Cette nouvelle API est présentée comme étant plus flexible et

plus puissante que l'objet XMLHttpRequest.

DIATTARA Awa Compléments à la programmation web

 L'API Fetch

Elle fournit une définition de trois interfaces :

o Request : interface représentant une requête de ressource
o Response : interface représentant la réponse de la requête

o Headers : interface représentant les en-têtes de requête et de

réponse.

Elle implémente aussi le mixin Body qui fournit un ensemble de

méthodes permettant de gérer le corps de la requête et de la
réponse.

DIATTARA Awa Compléments à la programmation web

Utilisation de AJAX
La méthode fetch()

31
 La méthode fetch()

La méthode fetch() représente le cœur de l'API Fetch.

Elle permet l'échange de données avec le serveur de manière

asynchrone.

Elle prend un argument obligatoire, le chemin vers la ressource

souhaitée.
o Elle peut prendre optionnellement comme deuxième
argument un objet permettant de définir les options de notre
requête (méthode d'envoi, en-tête, etc.)

DIATTARA Awa
 La méthode fetch()

Elle renvoie une promesse qui résout la réponse de la requête

qu'elle soit un succès ou un échec.
o La promesse va être résolue dès que le serveur renvoie les en-têtes HTTP,
c'est-à-dire avant même qu'on ait le corps de la réponse.

La promesse sera rompue si la requête HTTP n’a pas pu être

effectuée.
o En revanche, l’envoi d’erreurs HTTP par le serveur comme un statut code
404 ou 500 vont être considérées comme normales et ne pas empêcher la
promesse d’être tenue.

On va donc vérifier le statut HTTP de la réponse en utilisant les

propriétés ok et status de l’objet Response renvoyé.
o La propriété ok contient un booléen : true si le statut code HTTP de la
réponse est compris entre 200 et 299, false sinon.
o La propriété status va renvoyer le statut code HTTP de la réponse (la
valeur numérique liée à ce statut) comme 200, 301, 404 ou 500
DIATTARA Awa
 La méthode fetch()

Pour récupérer le corps de la réponse, utilisez les méthodes de

l’interface Response en fonction du format qui vous intéresse :
o La méthode text() retourne la réponse sous forme de chaine
de caractères

o La méthode json() retourne la réponse en tant qu’objet JSON

o La méthode formData() retourne la réponse en tant qu’objet

FormData
o La méthode arrayBuffer() retourne la réponse en tant qu’objet
ArrayBuffer

o La méthode blob() retourne la réponse en tant qu’objet Blob

DIATTARA Awa
La méthode fetch()

Exemple :

DIATTARA Awa
Exemples d'application

36
La méthode fetch() : comment passer des options à fetch()

Exemple 1 : démonstration de requête GET avec un fichier

JSON

 Sortie

DIATTARA Awa
La méthode fetch() : comment passer des options à fetch()

Exemple 2 : démonstration de requête GET

o Nous allons utiliser une API qui renvoie des données aléatoires sur les
personnes : [Link]

 Sortie

DIATTARA Awa
La méthode fetch() : comment passer des options à fetch()

Exemple 3 : démonstration de requête POST

o Nous allons publier des données aléatoires à l'aide de la méthode POST

 Sortie

DIATTARA Awa