Node.

js : modules et promesses

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

[Link]@[Link]

H & H: Research and Training 1 / 55

 Plan

1 CommonJS
exports
require
Importation multiple
Module ES6 ou ESModule

2 ESModule
export
import
as
default

H & H: Research and Training 2 / 55

 Plan

3 ESModule et CommonJS

4 Callback

5 Promesse
finally
async
await
Chaı̂nage de then
[Link]

6 Callbacks vs promesses

H & H: Research and Training 3 / 55

 CommonJS

[Link]
Trois types de modules

Core modules : définis dans le noyau du [Link]. Pour les

utiliser, il faut les importer.

H I ©
Community modules : proposés par la communauté [Link].
U EL
Pour les utiliser, il faut les installer et ensuite les importer.
M O
f E L les utiliser, il faut les exporter puis
Modules personnalisés : pour
les importer.
c h re
©A

H & H: Research and Training 4 / 55

 CommonJS

[Link]
Trois types de modules

Core modules : définis dans le noyau du [Link]. Pour les

utiliser, il faut les importer.

H I ©
Community modules : proposés par la communauté [Link].
U EL
Pour les utiliser, il faut les installer et ensuite les importer.
M O
f E L les utiliser, il faut les exporter puis
Modules personnalisés : pour
les importer.
c h re
©A
Remarque

Dans ce chapitre, nous traitons les modules personnalisés.

H & H: Research and Training 4 / 55

 CommonJS

[Link]

Module
Un fichier pouvant contenir des variables, constantes, fonctions,
classes...

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 5 / 55

 CommonJS

[Link]

Module
Un fichier pouvant contenir des variables, constantes, fonctions,
classes...

H I ©
U EL
O
Propriétés
f E LM
ch r e
Il est possible d’utiliser des éléments définis dans un autre fichier :
©A
variable, constante, fonction, classe...
Pour cela, il faut l’importer là où on a besoin de l’utiliser
Pour importer un élément, il faut l’exporter dans le fichier source

H & H: Research and Training 5 / 55

 CommonJS

[Link]

Étant donné le fichier [Link] dont le contenu est

const somme = (a = 0, b = 0) => {
H I ©
return a + b;
UEL
}
O
f E LM
r
const produit = (a = 0, b = 1) => {
ch e
©A
return a * b;
}

H & H: Research and Training 6 / 55

 CommonJS exports

[Link]

Pour exporter les deux fonctions somme et produit de

[Link] : première syntaxe
const somme = (a = 0, b = 0) => {
H I ©
EL
return a + b;
}
M OU
E
const produit = (a = f0, L = 1) => {
c hr
return a * b; e b

} © A
[Link] = { somme, produit }

H & H: Research and Training 7 / 55

 CommonJS exports

[Link]

Deuxième syntaxe
[Link] = (a = 0, b = 0) => {
H I ©
return a + b;
UEL
}
O
f E LM
r e
[Link] = (a = 0, b = 1) => {
ch
©A
return a * b;
}

H & H: Research and Training 8 / 55

 CommonJS exports

[Link]

Troisième syntaxe
[Link] = {
somme: (a = 0, b = 0) => {
H I ©
return a + b;
UEL
}, O
f E LM
ch r e
produit: (a = 0, b = 1) => {

} ©A
return a * b;

H & H: Research and Training 9 / 55

 CommonJS require

[Link]
Pour importer et utiliser une fonction

const { somme } = require('./fonctions');

[Link](somme(2, 5));
// affiche 7
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 10 / 55

 CommonJS require

[Link]
Pour importer et utiliser une fonction

const { somme } = require('./fonctions');

[Link](somme(2, 5));
// affiche 7
H I ©
UEL
O
Pour importer plusieurs éléments
f E LM
ch r e
const { somme, produit } = require('./fonctions');

©A
[Link](somme(2, 5));
// affiche 7

[Link](produit(2, 5));
// affiche 10

H & H: Research and Training 10 / 55

 CommonJS Importation multiple

[Link]

Pour tout importer dans une constante f

const f = require('./fonctions');
H I ©
U EL
[Link]([Link](2, 5));
O
// affiche 7
f E LM
ch r e
©
// affiche
A
[Link]([Link](2,
10
5));

H & H: Research and Training 11 / 55

 CommonJS Importation multiple

[Link]
On peut aussi renommer les éléments exportés

const somme = (a = 0, b = 0) => {

return a + b;
}

const produit = (a = 0, b = 1) => {

H I ©
return a * b;
EL
}
M OU
f E L , produit }
[Link] = { addition: somme

chr e
© A

H & H: Research and Training 12 / 55

 CommonJS Importation multiple

[Link]
On peut aussi renommer les éléments exportés

const somme = (a = 0, b = 0) => {

return a + b;
}

const produit = (a = 0, b = 1) => {

H I ©
return a * b;
EL
}
M OU
f E L , produit }
[Link] = { addition: somme

chr e
© A
Pour importer

const { addition } = require('./fonctions');

[Link](addition(2, 5));
// affiche 7

H & H: Research and Training 12 / 55

 CommonJS Module ES6 ou ESModule

[Link]
Utilisons la syntaxe ES6 dans [Link]

const somme = (a = 0, b = 0) => {

return a + b;
}

const produit = (a = 0, b = 1) => {

return a * b;
H I ©
EL
}

export { somme, produit };

O U
f E LM
ch r e
©A

H & H: Research and Training 13 / 55

 CommonJS Module ES6 ou ESModule

[Link]
Utilisons la syntaxe ES6 dans [Link]

const somme = (a = 0, b = 0) => {

return a + b;
}

const produit = (a = 0, b = 1) => {

return a * b;
H I ©
EL
}

export { somme, produit };

O U
f E LM
ch r e
©A
Et dans [Link]

import { somme, produit } from "./[Link]";

[Link](somme(2, 5));
// affiche 7

[Link](produit(2, 5));
// affiche 10

H & H: Research and Training 13 / 55

 ESModule

[Link]
exports, require...

Syntaxe native de [Link] définie dans CommonJS : système de gestion de

module de [Link].

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 14 / 55

 ESModule

[Link]
exports, require...

Syntaxe native de [Link] définie dans CommonJS : système de gestion de

module de [Link].

H I ©
UEL
O
LM
Question

e f E
Peut-on utiliser la syntaxe ES6 (import, export...) avec [Link] ?
r
ch
©A

H & H: Research and Training 14 / 55

 ESModule

[Link]
exports, require...

Syntaxe native de [Link] définie dans CommonJS : système de gestion de

module de [Link].

H I ©
UEL
O
LM
Question

e f E
Peut-on utiliser la syntaxe ES6 (import, export...) avec [Link] ?
r
ch
©A
Réponse

Oui, depuis [Link] 13.2.0, avec un peu de configuration pour changer le

système natif de [Link]

H & H: Research and Training 14 / 55

 ESModule

[Link]

Démarche
H I ©
U ELECMAScript
Privilégier l’extension .mjs pour les modules
Modifier la configuration par L MO
e f E défaut dans [Link] : ajouter

chr
"type": "module"

© A

H & H: Research and Training 15 / 55

 ESModule

[Link]

Ajoutons "type": "module" pour remplacer CommonJS dans [Link]

{
"name": "cours-nodejs",
"version": "1.0.0",
"description": "",
H I ©
EL
"main": "[Link]",
"type": "module",
O U
LM
"dependencies": {
},
"devDependencies": {},
r e f E
ch
"scripts": {

©A
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

H & H: Research and Training 16 / 55

 ESModule

[Link]

Étant donné le fichier [Link] dont le contenu est

function somme(a, b) {
H I ©
return a + b;
UEL
}
O
f E LM
function produit(a, b) {
ch r e
©A
return a * b;
}

H & H: Research and Training 17 / 55

 ESModule export

[Link]
Pour exporter les deux fonctions somme et produit de [Link]

export function somme(a, b) {

return a + b;
}

export function produit(a, b) {

return a * b;
H I ©
}
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 18 / 55

 ESModule export

[Link]
Pour exporter les deux fonctions somme et produit de [Link]

export function somme(a, b) {

return a + b;
}

export function produit(a, b) {

return a * b;
H I ©
}
UEL
O
f E LM
Ou aussi

ch r e
©A
function somme(a, b) {
return a + b;
}

function produit(a, b) {
return a * b;
}
export { somme, produit };

H & H: Research and Training 18 / 55

 ESModule import

[Link]
Pour importer et utiliser une fonction

import { somme } from './fonctions';

[Link](somme(2, 5));
// affiche 7
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 19 / 55

 ESModule import

[Link]
Pour importer et utiliser une fonction

import { somme } from './fonctions';

[Link](somme(2, 5));
// affiche 7
H I ©
UEL
O
Pour importer plusieurs éléments
f E LM
ch r e
import { somme, produit } from './fonctions';

©A
[Link](somme(2, 5));
// affiche 7

[Link](produit(2, 5));
// affiche 10

H & H: Research and Training 19 / 55

 ESModule as

[Link]
On peut aussi utiliser des alias

import { somme as s, produit as p } from './fonctions';

[Link](s(2, 5));
// affiche 7

H I ©
EL
[Link](p(2, 5));
// affiche 10

O U
f E LM
ch r e
©A

H & H: Research and Training 20 / 55

 ESModule as

[Link]
On peut aussi utiliser des alias

import { somme as s, produit as p } from './fonctions';

[Link](s(2, 5));
// affiche 7

H I ©
EL
[Link](p(2, 5));
// affiche 10

O U
f E LM
Ou aussi
ch r e
import
©A
* as f from './fonctions';

[Link]([Link](2, 5));
// affiche 7

[Link]([Link](2, 5));
// affiche 10

H & H: Research and Training 20 / 55

 ESModule as

[Link]
Les alias peuvent être attribués à l’exportation

function somme(a, b) {
return a + b;
}

function produit(a, b) {
return a * b;
H I ©
}
export { produit as p, somme as s } ;
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 21 / 55

 ESModule as

[Link]
Les alias peuvent être attribués à l’exportation

function somme(a, b) {
return a + b;
}

function produit(a, b) {
return a * b;
H I ©
}
export { produit as p, somme as s } ;
UEL
O
f E LM
Pour importer
ch r e
©A
import * as f from './fonctions';

[Link](f.s(2, 5));
// affiche 7

[Link](f.p(2, 5));
// affiche 10

H & H: Research and Training 21 / 55

 ESModule default

[Link]
On peut aussi utiliser le export default (un seul par fichier)

export default function somme(a, b) {

return a + b;
}

export function produit(a, b) {

return a * b;
H I ©
}
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 22 / 55

 ESModule default

[Link]
On peut aussi utiliser le export default (un seul par fichier)

export default function somme(a, b) {

return a + b;
}

export function produit(a, b) {

return a * b;
H I ©
}
U EL
O
f E LM
r e
Pour importer, pas besoin de { } pour les éléments exporter par défaut
ch
©A
import somme from './fonctions';
import { produit } from './fonctions';

[Link](somme(2, 5));
// affiche 7

[Link](produit(2, 5));
// affiche 10

H & H: Research and Training 22 / 55

 ESModule default

[Link]

Attention, ici on a importé somme avec deux alias différents

import s from './fonctions';
import produit from './fonctions';
H I ©
UEL
O
LM
[Link](s(2, 5));
// affiche 7
r e f E
ch
©A
[Link](produit(2, 5));
// affiche 7

H & H: Research and Training 23 / 55

 ESModule et CommonJS

[Link]

Question
Peut-on utiliser à la fois CommonJS et ESModule dans le même
projet ? H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 24 / 55

 ESModule et CommonJS

[Link]

Question
Peut-on utiliser à la fois CommonJS et ESModule dans le même
projet ? H I ©
UEL
O
f E LM
Réponse ch r e
©A
ESModule et CommonJS sont mutuellement exclusifs, nous ne
pouvons donc pas utiliser les modules ES6 dans CommonJS.

H & H: Research and Training 24 / 55

 ESModule et CommonJS

[Link]

Remarque

modules ES6.
H I ©
Les variables CommonJS comme filename et dirname ne sont pas accessibles dans les

UEL
O
f E LM
ch r e
©A

H & H: Research and Training 25 / 55

 ESModule et CommonJS

[Link]

Remarque

modules ES6.
H I ©
Les variables CommonJS comme filename et dirname ne sont pas accessibles dans les

U EL
O
f E LM
ch r e
Depuis [Link] 21.2.0, on peut utiliser

©A
[Link] pour récupérer le chemin absolu vers le fichier courant

[Link] pour récupérer le chemin absolu vers le répertoire courant

H & H: Research and Training 25 / 55

 Callback

[Link]
Fonction de retour (callback)

fonction appelée comme un paramètre d’une deuxième fonction

très utilisée en JavaScript (jQuery et [Link]) avec les fonctions
asynchrones
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 26 / 55

 Callback

[Link]
Fonction de retour (callback)

fonction appelée comme un paramètre d’une deuxième fonction

très utilisée en JavaScript (jQuery et [Link]) avec les fonctions
asynchrones
H I ©
UEL
O
f E LM
r e
Considérons les deux fonctions suivantes
ch
function
© A b) {
somme(a,
return a + b;
}
function produit(a, b) {
return a * b;
}

H & H: Research and Training 26 / 55

 Callback

[Link]

Utilisons les fonctions précédentes comme callback d’une

fonction operation()

H I ©
EL
function operation(a, b, fonction) {
[Link] (fonction(a, b));
O U
}
f E LM
ch
// appeler la fonction opérationr e
©A
operation (3, 5, somme);
// affiche 8

H & H: Research and Training 27 / 55

 Callback

[Link]

Exercice
H I ©
U ELdesdeux
Modifier la fonction opération pour qu’elle puisse accepter fonctions

M O
callback ensuite retourner le résultat de la composition deux.
L
E produit) retourne 30 = (2 + 3) * 6
fsomme,
Par exemple :
operation (2, 3h
c e
, r6,

©A

H & H: Research and Training 28 / 55

 Callback

[Link]
Considérons la déclaration de la fonction JavaScript suivant qui calcule
le résultat de la division de deux nombres
const division = (a, b) => {
if (b === 0) {
throw "Problème de division par zéro";
}
H I ©
return a / b;
UEL
}
O
f E LM
ch r e
©A

H & H: Research and Training 29 / 55

 Callback

[Link]
Considérons la déclaration de la fonction JavaScript suivant qui calcule
le résultat de la division de deux nombres
const division = (a, b) => {
if (b === 0) {
throw "Problème de division par zéro";
}
H I ©
return a / b;
U EL
}
O
f E LM
ch r e
A
L’appel de la fonction
©
[Link](division(10, 2));
// affiche 5

[Link](division(10, 0));
// affiche Problème de division par zéro

H & H: Research and Training 29 / 55

 Callback

[Link]

Remarque
H I ©
U
En [Link], on utilise souvent les callback
L pour les
Esurtout
traitements asynchrones.
L MO
r e f E
en [Link] ont une signature similaire.
ch
Les fonctions callbacks

© A

H & H: Research and Training 30 / 55

 Callback

Réécriture de la fonction division avec les callback

const division = (a, b, callback) => {

if (b !== 0) {
return callback(null, a / b);
}
return callback('Problème de division par zéro', null);
};

const a = 10, b = 0;
H I ©
division(a, b, (err, result) => {
UEL
O
LM
if (err) {

} else {
r e E
[Link]("erreur : " + err);
f
ch
[Link]( `${a} / ${b} = ${result}`);

©A
}
});
// affiche erreur : Problème de division par zéro

H & H: Research and Training 31 / 55

 Callback

Réécriture de la fonction division avec les callback

const division = (a, b, callback) => {

if (b !== 0) {
return callback(null, a / b);
}
return callback('Problème de division par zéro', null);
};

const a = 10, b = 0;
H I ©
division(a, b, (err, result) => {
U EL
O
LM
if (err) {

} else {
r e E
[Link]("erreur : " + err);
f
ch
[Link]( `${a} / ${b} = ${result}`);

©A
}
});
// affiche erreur : Problème de division par zéro

Affecter la valeur 2 à b et vérifier que le bon résultat s’affiche.

H & H: Research and Training 31 / 55

 Callback

[Link]

Conventions

H I ©
Les fonctions callback prennent au moins deux paramètres :
U EL
O
un premier paramètre err qui reste vide si la fonction a bien été
E LM
exécutée, sinon il contient le contenu du message d’erreur.
f
r e
ch ètre result qui contient le résultat si la
un deuxième param
n’a A
fonction© pas détecter d’erreurs.

H & H: Research and Training 32 / 55

 Callback

[Link]

Exercice
Considérons les données suivantes :
H I ©
U EL
var tab = [1, 3, 6, 8, 9]; O
var element = 5;
f E LM
r e
ch qui permet de vérifier si element appartient à
A
Écrire une fonction
© dans ce cas sa position
tab et retourne

H & H: Research and Training 33 / 55

 Callback

[Link]
Solution (avec callback)

const searchElement = (data, callback) => {

for (let i = 0; i < [Link]; i++) {
if ([Link][i] == [Link]) {
return callback(null, i);
}
}
H I ©
EL
return callback( `${[Link]} n'est pas dans tableau`);
};
O U
const tab = [1, 3, 6, 8, 9];
const element = 6;
f E LM
ch r e
const data = { tableau: tab, filtre: element };

©A
searchElement(data, (err, result) => {
if (err) {
[Link]("erreur :" + err);
} else {
[Link]( `${element} est dans le tableau à la position ${
result}`);
}
});

H & H: Research and Training 34 / 55

 Callback

[Link]
Ou

const searchElement = function (tableau, elt, callback) {

for (let i = 0; i < [Link]; i++) {
if (tableau[i] == elt) {
return callback(null, i);
}
}
H I ©
EL
return callback( `${elt} n'est pas dans tableau`);
};
O U
const tab = [1, 3, 6, 8, 9];
const element = 6;
f E LM
ch r e
const data = { tableau: tab, filtre: element };

©A
searchElement(tab, element, (err, result) => {
if (err) {
[Link]("erreur :" + err);
} else {
[Link]( `${element} est dans le tableau à la position ${
result}`);
}
});

H & H: Research and Training 35 / 55

 Callback

[Link]

Exercice 2

I ©
En utilisant les fonctions callback, écrire une fonction qui permet de
H
EL
déterminer le nombre d’occurrence d’une sous-chaı̂ne de caractère ch
U
dans une chaı̂ne de caractère str. O
ch = ab f E LM
ch r e
A
str = abbbaaaabaaabb
©
la fonction retourne 3.

H & H: Research and Training 36 / 55

 Promesse

[Link]

Promesse
Introduite dans ES6

I ©
Utilisée souvent pour réaliser des traitements sur un résultat suite
H
à une opération asynchrone
U EL
O
f E LM
Disposant d’une première méthode then() permettant de traiter

ch r e
le résultat une fois l’opération accomplie

©A
Disposant d’une deuxième méthode catch() exécutée en cas
d’échec de l’opération
Comme les fonctions : composée de deux parties : déclaration et
utilisation

H & H: Research and Training 37 / 55

 Promesse

Considérons la déclaration suivante d’une promesse

var test = true;

var promesse = new Promise((resolve, reject) => {
if (test)
resolve();
else
reject();
});

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 38 / 55

 Promesse

Considérons la déclaration suivante d’une promesse

var test = true;

var promesse = new Promise((resolve, reject) => {
if (test)
resolve();
else
reject();
});

H I ©
U EL
O
(resolve) ou échec (reject)
f E LM
Dans la partie utilisation, on doit indiquer ce qu’il faut faire dans les deux cas : réussite

promesse
ch r e
©A
.then(() => [Link]("test réussi") )
.catch(() => [Link]("erreur") );
// affiche test réussi car test = true

H & H: Research and Training 38 / 55

 Promesse

Considérons la déclaration suivante d’une promesse

var test = true;

var promesse = new Promise((resolve, reject) => {
if (test)
resolve();
else
reject();
});

H I ©
U EL
O
(resolve) ou échec (reject)
f E LM
Dans la partie utilisation, on doit indiquer ce qu’il faut faire dans les deux cas : réussite

promesse
ch r e
©A
.then(() => [Link]("test réussi") )
.catch(() => [Link]("erreur") );
// affiche test réussi car test = true

Le catch() n’est pas obligatoire.

H & H: Research and Training 38 / 55

 Promesse

[Link]
Une promesse peut être déclarée avec une fonction fléchée
var test = true;
var promesse = () => {
return new Promise((resolve, reject) => {
if (test)
resolve();
H I ©
else
UEL
reject(); O
});
f E LM
};
ch r e
©A

H & H: Research and Training 39 / 55

 Promesse

[Link]
Une promesse peut être déclarée avec une fonction fléchée
var test = true;
var promesse = () => {
return new Promise((resolve, reject) => {
if (test)
resolve();
H I ©
else
UEL
reject(); O
});
f E LM
};
ch r e
©A
Pour l’utilisation, il faut appeler promesse comme une fonction
promesse()
.then(() => [Link]("test réussi"))
.catch(() => [Link]("erreur"));

H & H: Research and Training 39 / 55

 Promesse

[Link]

H I ©
Remarque
UEL
O
f E LM
Une promesse peut recevoir des paramètres et retourner un résultat

ch r e
©A

H & H: Research and Training 40 / 55

 Promesse

[Link]
Exemple : déclaration

var division = (a, b) => {

return new Promise((resolve, reject) => {
if (b != 0)
resolve(a / b);
else
reject("erreur : division par zéro");
H I ©
EL
});
};

O U
f E LM
ch r e
©A

H & H: Research and Training 41 / 55

 Promesse

[Link]
Exemple : déclaration

var division = (a, b) => {

return new Promise((resolve, reject) => {
if (b != 0)
resolve(a / b);
else
reject("erreur : division par zéro");
H I ©
EL
});
};

O U
f E LM
L’utilisation

ch r e
©A
division(10, 2)
.then((res) => [Link]("résultat : " + res))
.catch((error) => [Link](error));
// affiche résultat : 5

division(5, 0)
.then((res) => [Link]("résultat : " + res))
.catch((error) => [Link](error));
// affiche erreur : division par zéro

H & H: Research and Training 41 / 55

 Promesse

[Link]
Remarque : les promesses s’exécutent d’une manière asynchrone

var division = (a: number, b: number) => {

return new Promise((resolve, reject) => {
if(b != 0)
resolve(a / b);
else
reject("erreur : division par zéro");

};
});

H I ©
division(10, 2)

UEL
O
.then((res) => [Link]("résultat : " + res))

LM
.catch((error) => [Link](error));

division(5, 0)

r e f E
.then((res) => [Link]("résultat : " + res))

ch
.catch((error) => [Link](error));

©A
[Link]("fin");

H & H: Research and Training 42 / 55

 Promesse

[Link]
Remarque : les promesses s’exécutent d’une manière asynchrone

var division = (a: number, b: number) => {

return new Promise((resolve, reject) => {
if(b != 0)
resolve(a / b);
else
reject("erreur : division par zéro");

};
});

H I ©
division(10, 2)

UEL
O
.then((res) => [Link]("résultat : " + res))

LM
.catch((error) => [Link](error));

division(5, 0)

r e f E
.then((res) => [Link]("résultat : " + res))

ch
.catch((error) => [Link](error));

©A
[Link]("fin");

Le résultat est

fin
résultat : 5
erreur : division par zéro

H & H: Research and Training 42 / 55

 Promesse finally

[Link]

finally
H I ©
Introduit dans ES2018
UEL
O
f E LM
Prenant comme paramètre une fonction callback appelée

rejetée. ch r e
lorsque l’exécution de la promesse est terminée : résolue ou

©A

H & H: Research and Training 43 / 55

 Promesse finally

[Link]
Remarque : les promesses s’exécutent d’une manière asynchrone

division(10, 2)
.then((res) => [Link]("résultat : " + res))
.catch((error) => [Link](error))
.finally(() => [Link]('finally'));

H I ©
division(5, 0)
UEL
O
.then((res) => [Link]("résultat : " + res))

LM
.catch((error) => [Link](error))

r e f E
.finally(() => [Link]('finally'));

ch
Le résultat est

résultat : 5
©A
erreur : division par zéro
finally
finally

H & H: Research and Training 44 / 55

 Promesse async

[Link]

Le mot-clé async [ES2018]

Il permet de transformer une fonction en promesse

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 45 / 55

 Promesse async

[Link]

Le mot-clé async [ES2018]

Il permet de transformer une fonction en promesse

H I ©
UEL
MO
Considérons la fonction somme() suivante
let somme = (a, b) => E
f L
a + b;
c h r e
©A

H & H: Research and Training 45 / 55

 Promesse async

[Link]

Le mot-clé async [ES2018]

Il permet de transformer une fonction en promesse

H I ©
UEL
MO
Considérons la fonction somme() suivante
let somme = (a, b) => E
f L
a + b;
c h r e
©A
Le résultat est
[Link](somme(2, 3));
// affiche 5

H & H: Research and Training 45 / 55

 Promesse async

[Link]
Pour transformer la fonction somme() en promesse, on ajoute le
mot-clé async à sa déclaration
let somme = async (a, b) => a + b;

H I ©
Maintenant, on peut l’utiliser comme une promesse
UEL
O
// affiche 5 f E LM
somme(2, 3).then(result => [Link](result));

ch r e
©A

H & H: Research and Training 46 / 55

 Promesse async

[Link]
Pour transformer la fonction somme() en promesse, on ajoute le
mot-clé async à sa déclaration
let somme = async (a, b) => a + b;

H I ©
Maintenant, on peut l’utiliser comme une promesse
UEL
O
// affiche 5 f E LM
somme(2, 3).then(result => [Link](result));

ch r e
©A
Appeler somme() comme une simple fonction JavaScript
n’affiche pas le résultat
[Link](somme(2, 3));
// affiche Promise { 5 }

H & H: Research and Training 46 / 55

 Promesse await

[Link]

Le mot-clé await
H I ©
U EL asynchrones
utilisable seulement dans des environnements
permettant d’interrompre l’exL MOde la fonction asynchrone et
écution
r
attendre la résolutione f
de
E
la promesse
A ch
©

H & H: Research and Training 47 / 55

 Promesse await

[Link]

Considérons la promesse somme() qui attend 2 secondes pour retourner un résultat

let somme = (a, b) => {

return new Promise((resolve) => {
setTimeout(() => { resolve(a + b) }, 2000);
});
H I ©
EL
};

O U
f E LM
ch r e
©A

H & H: Research and Training 48 / 55

 Promesse await

[Link]

Considérons la promesse somme() qui attend 2 secondes pour retourner un résultat

let somme = (a, b) => {

return new Promise((resolve) => {
setTimeout(() => { resolve(a + b) }, 2000);
});
H I ©
EL
};

O U
f E LM
ch r e
On veut implémenter une promesse sommeCarre() qui utilise la promesse somme()

©A
let sommeCarre = async (a, b) => {
let s = 0;
somme(a, b).then(result => s = result);
let result = [Link](s, 2);
return result;
};

H & H: Research and Training 48 / 55

 Promesse await

[Link]

Pour utiliser la promesse avec les valeurs 2 et 3

sommeCarre(2, 3)
.then(result => [Link](result));
H I ©
// affiche 0
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 49 / 55

 Promesse await

[Link]

Pour utiliser la promesse avec les valeurs 2 et 3

sommeCarre(2, 3)
.then(result => [Link](result));
H I ©
// affiche 0
UEL
O
f E LM
ch r e
Explication
©A
On n’a pas obtenu le résultat de la somme lorsqu’on a calculé le carré

H & H: Research and Training 49 / 55

 Promesse await

Solution, utiliser await pour attendre la fin de la première promesse

let sommeCarre = async (a, b) => {

let s = 0;
await somme(a, b).then(result => s = result);
let result = [Link](s, 2);
return result;
};

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 50 / 55

 Promesse await

Solution, utiliser await pour attendre la fin de la première promesse

let sommeCarre = async (a, b) => {

let s = 0;
await somme(a, b).then(result => s = result);
let result = [Link](s, 2);
return result;
};

H I ©
Ou
U EL
O
let sommeCarre = async (a, b) => {
let s = somme(a, b);
f E LM
ch
let result = [Link](s, 2); r e
©A
return result;
};

H & H: Research and Training 50 / 55

 Promesse await

Solution, utiliser await pour attendre la fin de la première promesse

let sommeCarre = async (a, b) => {

let s = 0;
await somme(a, b).then(result => s = result);
let result = [Link](s, 2);
return result;
};

H I ©
Ou
U EL
O
let sommeCarre = async (a, b) => {
let s = somme(a, b);
f E LM
ch
let result = [Link](s, 2); r e
©A
return result;
};

Si on teste maintenant

sommeCarre(2, 3).then(result => [Link](result));

// affiche 25

H & H: Research and Training 50 / 55

 Promesse await

[Link]

H I ©
Remarque
UEL
O
f E LM
await doit toujours être utilisé dans une fonction asynchrone.

ch r e
©A

H & H: Research and Training 51 / 55

 Promesse Chaı̂nage de then

[Link]
Considérons la promesse carre() acceptant un seul paramètre

var carre = (a) => {

return new Promise((resolve) => {
resolve(a ** 2);
});
};

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 52 / 55

 Promesse Chaı̂nage de then

[Link]
Considérons la promesse carre() acceptant un seul paramètre

var carre = (a) => {

return new Promise((resolve) => {
resolve(a ** 2);
});
};

H I ©
U EL
On peut enchaı̂ner les then
O
carre(3)
f E LM
r e
.then((res) => res + 1) // .then((9) => 9 + 1)
.then(carre) // carre (10)
ch
©A
.then((res) => [Link]("résultat : " + res)); // affiche 100

H & H: Research and Training 52 / 55

 Promesse Chaı̂nage de then

[Link]
Considérons la promesse carre() acceptant un seul paramètre

var carre = (a) => {

return new Promise((resolve) => {
resolve(a ** 2);
});
};

H I ©
U EL
On peut enchaı̂ner les then
O
carre(3)
f E LM
r e
.then((res) => res + 1) // .then((9) => 9 + 1)
.then(carre) // carre (10)
ch
©A
.then((res) => [Link]("résultat : " + res)); // affiche 100

Remarques

Si une valeur est retournée, la méthode then() suivante est appelée avec cette valeur.

H & H: Research and Training 52 / 55

 Promesse [Link]

[Link]

Le mot-clé all retourne une promesse qui

est résolue lorsque l’ensemble des promesses contenues dans

H I ©
l’itérable passé en paramètre ont été résolues

E L qui échoue au
échoue avec la raison de la première promesse
U
sein de l’itérable
L MO
r e f E
A ch
©

H & H: Research and Training 53 / 55

 Promesse [Link]

[Link]

Le mot-clé all retourne une promesse qui

est résolue lorsque l’ensemble des promesses contenues dans

H I ©
l’itérable passé en paramètre ont été résolues

E L qui échoue au
échoue avec la raison de la première promesse
U
sein de l’itérable
L MO
r e f E
A ch
©la fonction somme() suivante
Considérons
let somme = async (a, b) => a + b;
let produit = async (a, b) => a * b;

H & H: Research and Training 53 / 55

 Promesse [Link]

[Link]

Pour attendre la fin des deux promesses somme et produit pour

faire la suite (afficher les résultats)
H I ©
U EL
Promise
O
.all([somme(2,3), produit(2,3)])
f E LM
ch r e
.then((values) => [Link](values));

©A
// affiche [ 5, 6 ]

H & H: Research and Training 54 / 55

 Callbacks vs promesses

[Link]

Callbacks : avantages Promesses : avantages

Simplicité de compréhension (fonction) Lisibilité améliorée

Contrôle précis et facile de l’exécution

H
block catch)I ©
Gestion simplifiée des erreurs (avec un

U EL
MO
Chaı̂nage plus facile.

f E L
ch r e
©A
Callbacks : inconvénients Promesses : inconvénients

Nesting excessif (Callback Hell) : à cause Compatibilité limitée avec certains

des opérations asynchrones imbriquées navigateurs et modules

Gestion d’erreur plus complexe Construction plus complexe

H & H: Research and Training 55 / 55