Promise - javascript tome xxiii

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
JA
V
ASCRIPT (ProgrammationInternet)VOL. XXIII
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
[email protected]
INTRODUCTION :
L'objet "Promise" (EcmaScript 6, 2015), facilite la programmation asynchrone (multithreading) : le déroulement du programme se poursuit pendant 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 passer 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 « undefined » on ne peut pas laisser la place du premier paramètre vide.
La méthode « then » peut donc prendre tout au plus deux arguments facultatifs (qui son des CALLBACKs), le premier exécutant si Réussite (selon l’argument 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
}
});
« 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);
})
Promesse (Promise)
- 2/7 am)
dimanche, 21. octobre 2018 (10:00
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXIII
Une Promise peut être :
1.
2.
3.
4.
fulfilled
rejected
pending
settled
- Réussie
- Échec
- En cours d’exécution/évaluation
- 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);
}
Promesse (Promise)
- 3/7 am)
dimanche, 21. octobre 2018 (10:00
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXIII
// 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 );
});
Promesse (Promise)
- 4/7 am)
dimanche, 21. octobre 2018 (10:00
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXIII
// 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
test.html:69
"Promise1" résolue après 3003 ms.
"Promise2" résolved after 3009 ms.
++++++++++==========++++++++++
AVEC FIRFOX QUANTUM 62.0.2 :
Waiting1 ...
Promise { <state>: "pending" }
test.html:51:1
test.html:52:1
Waiting2 ...
Promise { "pending" }
​ <state>: "pending"
​ <prototype>: PromiseProto { … }
test.html:76:1
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.
Promise { "fulfilled" }
​
<state>: "fulfilled"
Promesse (Promise)
- 5/7 am)
test.html:70:7
dimanche, 21. octobre 2018 (10:00
J.D.B. DIASOLUKA Nz. Luyalu
​
JavaScript Tome-XXIII
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
<value>: "\"Promise2\" résolved after 3012 ms."
<prototype>: PromiseProto
catch: function catch()
constructor: function Promise()
finally: function finally()
then: function then()
Symbol(Symbol.toStringTag): "Promise"
<prototype>: Object { … }
<prototype>: {…}
__defineGetter__: function __defineGetter__()
__defineSetter__: function __defineSetter__()
__lookupGetter__: function __lookupGetter__()
__lookupSetter__: function __lookupSetter__()
constructor: function Object()
hasOwnProperty: function hasOwnProperty()
isPrototypeOf: function isPrototypeOf()
propertyIsEnumerable: function propertyIsEnumerable()
toLocaleString: function toLocaleString()
toSource: function toSource()
toString: function toString()
valueOf: function valueOf()
On peut tester en une seule opération plusieurs [une array de] Promises
(processus) avec une array de Promises. Les résultats de cette array de Promises servira aussi comme paramètre du CALLBACK de then qui suit.
<script> "use strict";
Promise.all([false,true,false,true]).then(function(arrayDesResultats) {
console.dir(arrayDesResultats)
})
// Array(4) […]
//
0: false
//
1: true
//
2: false
//
3: true
//
length: 4
//
<prototype>: Array []
</script>
Mots-clés :
Promise, Promise.all, Promise.race, Promise.reject, Promise.resolve, promise.catch, resolve, reject, fulfilled, rejected, pending, settled, tâche, asynchrone, réussite, échec, multithreading, Javascript, curryng, fonction englobante, fonction imbriquée, opération, fonction, ECMA.
Promesse (Promise)
- 6/7 am)
dimanche, 21. octobre 2018 (10:00
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXIII
D
IA
SO
LU
K
AN
z. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Études humanités : Scientifique - Mathématiques & Physique.
Informaticien-amateur, Programmeur et WebMaster.
Chercheur indépendant, autonome et autofinancé,
bénévole, sans aucun conflit d’intérêt ou liens
d'intérêts ou contrainte promotionnelle avec qui qu’il
soit ou quelqu’organisme ou institution / organisation
que ce soit, étatique, paraétatique ou privé, industriel
ou commercial en relation avec le sujet présenté.
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
[email protected]
Promesse (Promise)
- 7/7 am)
dimanche, 21. octobre 2018 (10:00