Promise - javascript tome xxiii

J.B. DadetJ.B. DadetJ.B. Dadet DIASOLUKADIASOLUKADIASOLUKA LuyaluLuyaluLuyalu NzoyifuangaNzoyifuangaNzoyifuanga
JAVASCRIPT (ProgrammationInternet) VOL. XXIII
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
[email protected]
INTRODUCTION :
L'objet "Promise" (EcmaScript 6, 2015), facilite la programmation asyn-
chrone (multithreading) : le déroulement du programme se poursuit pen-
dant que les opérations asynchrones tournent aussi.
L’objet Promise fonctionne en mode «use strict» ou pas.
Le principe de fonctionnement est le suivant :
La définition (ou construction) de la fonction (ou objet) Promise définit en
paramètre la fonction asynchrone [à exécuter au moment de son appel] qui
est un CALLBACK. Cette fonction asynchrone (Promise) a deux paramètres,
le premier paramètre sera exécuté en cas de réussite (=resolve) pour pas-
ser un argument à la méthode « then ». Le deuxième paramètre sera exé-
cuté en cas d'échec (=reject) pour passer son argument à la méthode
« then ». Le paramètre ainsi retenu de la fonction Promise passera donc son
argument à la méthode "then" (de la fonction Promise) dans l'appel . Si le
premier argument n’est pas utile il faut tout bonnement le baptiser « unde-
fined » on ne peut pas laisser la place du premier paramètre vide.
La méthode « then » peut donc prendre tout au plus deux arguments facul-
tatifs (qui son des CALLBACKs), le premier exécutant si Réussite (selon l’ar-
gument du premier paramètre de Promise), et le deuxième argument de
« then » si Échec (selon l’argument du deuxième paramètre de Promise).
Si le premier argument n’est pas utile il faut tout bonnement le baptiser
« undefined » on ne peut pas laisser la place du premier paramètre vide.
La méthode « then » passe une valeur à une éventuelle deuxième « then »
via la directive « return ».
Le pseudo-code générique d’une Promise est :
var promise = new Promise(function(successf, failf) {
// Tache pouvant bien être async
if (/* Quand absolument TOUT a bien marché*/) {
successf("msg succès");
}
else { // Une ou plusieurs autres choses ont crashé
failf(Error("msg échec")); // objet « Error »

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXIII
Promesse (Promise) - 2 / 7 - dimanche, 21. octobre 2018 (10:00
am)
}
});
« successf » et « failf » peuvent être soient des pointeurs sur fonction
(comme ci-dessus) ou des fonctions [développées] inline = in situ.
Une autre syntaxe :
var promise = new Promise(psuccessf, pfailf)
.then(
// Notez le point
function(pResponse) {
console.dir("OK!", pResponse);
}
, // Notez la virgule
function(erreur) {
console.dir("KO!", erreur);
}
)
Au lieu d’utiliser le deuxième paramètre de « then » comme fonction de
non succès (= fonction d’erreur), on peut se servir de « catch » après le
« then », et précédé d’un point au lieu de la virgule :
var promise = new Promise(psuccessf, pfailf)
.then(
// Notez le point
function(pResponse) {
console.dir("OK!", pResponse);
}
) // Notez le point
.catch(function(erreur) {
console.dir("KO!", erreur);
})
Mais ce dernier code équivaut plus à ceci :
var promise = new Promise(psuccessf, pfailf)
.then(
// Notez le point
function(pResponse) {
console.dir("OK!", pResponse);
}
) // Notez toujours le point avant then
.then(undefined,function(erreur) {
console.dir("KO!", erreur);
})

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXIII
Promesse (Promise) - 3 / 7 - dimanche, 21. octobre 2018 (10:00
am)
Une Promise peut être :
1. fulfilled - Réussie
2. rejected - Échec
3. pending - En cours d’exécution/évaluation
4. settled - Achevée (fulfilled ou rejected).
EXEMPLE 1 :
<script> "use strict";
var promise = new Promise(function(fptrOK, fptrFail) {
fptrOK("ARGUMENT DU CALLBACK DE THEN");
});
promise.then(function(Arg_du_CALLBACK_de_then) {
console.dir(Arg_du_CALLBACK_de_then);
return "Ce then retourne " +
Arg_du_CALLBACK_de_then +
" au then qui suit";
})
.
then(function(retval_du_then_precedent) {
console.dir(retval_du_then_precedent);
})
</script>
EXEMPLE 2 :
<script type="text/javascript"> "use strict";
// Définition de la fonction Promise "fpromise"
// "ppromise" = adresse fonction àexécuter par fpromise
const fpromise = new Promise(ppromise);
// Les deux Paramètres de fpromise ou ppromise :
// fonction "siResolue" = si succès
// fonction "siEchec" = si pas résolue
var d, x
function ppromise(siResolue, siEchec) {
d=new Date();
x=siResolue // "x" = alias de "siResolue"
setTimeout(fsettimeout, 3000);
}

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXIII
Promesse (Promise) - 4 / 7 - dimanche, 21. octobre 2018 (10:00
am)
// La fonction de setTimeout.
// Prend l'adresse de siResolue àla ligne 15.
function fsettimeout(){
x('"Promise1" résolue après '+(new Date()-d)+' ms.')
}
// Etape finale.
// A la ligne 45, La fonction "disp" qui fait suite à
// "fpromise" via l'argument de la méthode "then" de Promise,
// au point d'entrée, et appeléeàla ligne 51,
// reçoit la valeur de son argument disp
// du paramètre "siResolue" de la fonction "ppromise"
// (stockée en alias dans la variable-fonction x àla ligne 15
// qui prend son argument àla ligne 24, et
// déclarée comme variable globale àla ligne 12),
// la fonction "ppromise" étant appelée par la fonction
// fpromise (la promesse).
//
// siResolue et siEchec (ici dans "x") représentent l'une des
// valeurs [retournées par] la Promise.
function disp(t){
console.dir(t)
console.dir(fpromise)
}
// Point d'entrée.
fpromise.then(disp)
// "Promise" résolue après 3000 ms (entre 3000 et 3017).
console.dir("Waiting1 ...")
console.dir(fpromise)
</script>
EXEMPLE 3 :
Une façon compacte d'écrire ce même code :
<script type="text/javascript"> "use strict";
const fpromisec = new Promise ( function(ifResolved, ifFail ) {
const d=new Date();
setTimeout ( function () {
ifResolved('"Promise2" résolved after '+(new Date()-d)+'
ms.')
} , 3000 );
});

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXIII
Promesse (Promise) - 5 / 7 - dimanche, 21. octobre 2018 (10:00
am)
// Point d'entrée
fpromisec.then(function(t){
console.dir(t)
console.dir(fpromisec)
})
// "Promise" résolue après 3000 ms.
console.dir("Waiting2 ...")
console.dir(fpromisec)
</script>
AFFICHAGE DE LA VERSION COMPACTE :
AVEC YANDEX VERSION 18.9.1.464 BETA :
test.html:50 Waiting1 ...
test.html:51 Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: ""Promise1" résolue après 3003 ms."
test.html:74 Waiting2 ...
test.html:75 Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: ""Promise2" résolved after 3009 ms."
test.html:41 "Promise1" résolue après 3003 ms.
test.html:69 "Promise2" résolved after 3009 ms.
++++++++++==========++++++++++
AVEC FIRFOX QUANTUM 62.0.2 :
Waiting1 ... test.html:51:1
Promise { <state>: "pending" } test.html:52:1
Waiting2 ... test.html:76:1
Promise { "pending" }
󰜌<state>: "pending"
󰜌<prototype>: PromiseProto { …} test.html:77:1
"Promise1" résolue après 3002 ms. test.html:41:7
Promise { <state>: "fulfilled", <value>: "\"Promise1\" résolue
après 3002 ms." }
test.html:42:4
"Promise2" résolved after 3012 ms. test.html:70:7
Promise { "fulfilled" }
󰜌<state>: "fulfilled"