Discussion :

[sinzen]

Bonjour,

Concernant les Promesse en JS, je doit setter la ou les valeur(s) dans une MAP(clé,valeur).

Seulement je n'ai pas mon tableau entier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Map {
  'Startpage' => Map { 'TranslationsSubSections' => Map {} },
  'Aboutpage' => Map {} }

voici la promesses:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
let test = Promise.all([getTranslation(key, value)]);
                test.then(function (result) {
 
                    myArrayArray.set(key,result);
 
                });

quand je veux stocker le resultat dans une variable depuis la promesse je recupere un undefined.

et quand ma variable est dans ma promesse et que je veux y acceder depuis l'exterieur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
let test = Promise.all([getTranslation(value, lang)]);
                test.then(function (result) {
                    mymap = result;
                });
 
                translatedArray.set(key,mymap);

j'ai ce resultat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
Map {
  'Title' => undefined,
  'Intro' => undefined,
  'Startpage' => Map {
  'TranslationSections' => undefined,
  'TranslationsSubSections' => Map {
  'TitleOne' => undefined,
  'TitleTwo' => undefined,
  'TitleTree' => undefined } },
  'Aboutpage' => Map { 'TranslationSections' => undefined } }

mon tableau avant traitement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "Title": "Translation example",
  "Intro": "Hello I am et, I am 500 years old.",
  "Startpage": {
    "TranslationSections": "Hello World",
    "TranslationsSubSections" :{
      "TitleOne"  : "Hello All",
      "TitleTwo"  : "Hello You",
      "TitleTree" : "Hello Me"
    }
  },
  "Aboutpage": {
    "TranslationSections": "We are letsboot"
  }
}

quand j'essaie de stoker les valeurs de ma promesses dans un tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
let test = Promise.all([getTranslation(value, key)]);
                test.then(function (result) {
                    mymap[key] = result;
                });

j'ai cette erreur..:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(node:1562) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot set property 'TitleOne' of undefined

Je touche au but mais j'ai un manque de compréhension envert le fonctionnement des promesses.

Merci pour votre aide.

[Watilin]

Salut,

comment ça va depuis hier ?

Bon, j’essaye de comprendre la logique de ton code mais je pense qu’il manque des éléments. Je vais essayer de t’aider quand même.

Je reconnais que je ne t’ai pas donné beaucoup d’indications la dernière fois. Promise.all attend en paramètre un tableau d’objets Promise, et renvoie une nouvelle promesse qui est résolue si et seulement si toutes les promesses du tableau sont résolues. Mais voyons ce qui se passe dans ton code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let test = Promise.all([ getValues(key, value) ]);

Tu passes un tableau à Promise.all, mais je ne sais pas ce que renvoie getValues. Cette fonction renvoie-t-elle une promesse ? Un tableau de promesses ? Je pense qu’il y a un niveau de tableau en trop.

• Soit getValues renvoie une seule promesse, et dans ce cas tu n’as pas besoin de Promise.all ;
• soit elle renvoie déjà un tableau, et dans ce cas tu n’as pas besoin des crochets [ ... ].

Note : si le tableau passé à Promise.all contient autre chose que des promesses, ça va marcher quand même (en tout cas sous Firefox, je viens de tester), et ça va considérer que tu as passé des promesses déjà résolues. Mais c’est un peu « par accident » et je ne crois pas que ce soit une bonne idée de se reposer sur ce comportement.

Je ne sais pas si ça va t’aider, mais j’ai lu récemment un article de blog qui proposait de transformer la fonction setTimeout en quelque chose qui retourne une promesse. Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

timeout(1000).then(() => { console.log("bonsoir"); });

À ton avis, comment on s’y prend ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
let timeout = (delay) => {
  return new Promise((resolve, reject) => {
    // ???
  });
}

Réponse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
let timeout = (delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, delay);
  });
}

Note qu’on n’utilise pas reject : jusqu’à preuve du contraire, un setTimeout n’échoue jamais.

À présent on va utiliser un tableau de promesses contenant des timeouts de différents délais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let timeouts = [ timeout(1000), timeout(500), timeout(777), timeout(1500) ];

Dans ta console, tu peux vérifier le « type » (en fait, le prototype) des promesses en utilisant Object.getPrototypeOf

Code console :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
>> Object.getPrototypeOf(timeouts[3])
<< PromiseProto { ... }

Maintenant, si on veut attendre que tous les délais soient écoulés, on passe le tableau timeouts à Promise.all :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Promise.all(timeouts).then((something) => { console.log(something); });

Dans le cas présent, la console affichera un tableau contenant quatre fois undefined, qui s’explique par le fait qu’on avait quatre promesses dans le tableau de départ, et que ces promesses ne se résolvent en aucune valeur.

---

Tu trouveras peut-être que cet exemple n’était pas très parlant. Prenons un autre cas simple : des promesses qui se résolvent instantanément (mais attention, une promesse se résoud toujours de manière asynchrone !)
Encore une fois, je te laisse l’exercice avec la réponse en spoiler. On veut quelque chose qui se comporte comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

promise42.then((value) => { console.log(value); }); // affiche 42

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let promise42 = new Promise((resolve, reject) => { resolve(42); });

On peut corser un tout petit peu les choses en souhaitant quelque chose de plus dynamique : une fonction qui reçoit un paramètre et qui retourne une promesse qui se résoud en ce paramètre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

promiseNumber(42).then((value) => { console.log(value); }); // affiche 42

Ce n’est pas plus difficile que timeout.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
let promiseNumber = (number) => {
  return new Promise((resolve, reject) => {
    resolve(number);
  });
};

Construisons à nouveau un tableau de promesses, et passons-le à Promise.all :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
let promiseNumbers = [ promiseNumber(42), promiseNumber(187), promiseNumber(5) ];
 
Promise.all(promiseNumbers).then((array) => {
  array.forEach((value) => { console.log(value); });
});

---

Un peu plus haut, j’ai rapidement attiré ton attention sur le fait que les promesses se résolvent toujours de façon asynchrone. C’est une manière savante de dire « pas dans l’ordre ». Tu auras sans doute remarqué ce genre de phénomène :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
new Promise((resolve, reject) => {
  resolve("Haricot");
}).then((value) => { console.log(value); });
 
console.log("Patate");

« Patate » s’affichera toujours avant « Haricot », et ce n’est pas un hasard : les promesses ont été conçues de cette façon.

Si tu tentes de traiter des données en dehors d’un .then, ton traitement se fera sur des données qui ne sont pas prêtes. Concrètement, quand tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
test.then(function (result) {
  mymap = result;
});
 
translatedArray.set(key, mymap);

mymap n’est pas prêt au moment où tu le passes à translatedArray.set. Si tu fais l’opération à l’intérieur de la fonction .then, ça devrait marcher.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
test.then(function (result) {
  mymap = result;
  translatedArray.set(key, mymap);
});

Une autre façon de faire : si tu utilises un return (ou la forme « expression » des fonctions flèches) à l’intérieur d’une fonction .then, tu peux chaîner les .then :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
new Promise((resolve, reject) => resolve(42))
.then((value) => { return value * 2; })
.then((value) => value + 1)
.then((value) => { console.log(value); });

Et là, les choses se feront dans l’ordre que tu souhaites.

[sinzen]

Merci pour ton aide.

En effet ma fonction ne retourne pas un tableaux de promesses un unique resultat à la fois:

Ma fonction est fait: getValues -> getTranslation

Voici ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getTranslation(input, key) {
 
    var promise = new Promise((resolve, reject) => {
      https.get(options, (result) => {
        let body = '';
 
        result.on('data', (chunk) => {
            body += toUTF8(chunk);
        });
 
        result.on('end', () => {
            resolve(result.toLowerCase());
        });
    }).on('error', (e) => {
         reject();
 
    })});
    return promise;
}

et ma fonction de retour:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
let test = getTranslation(key, value)
             .then((value) => {
           translatedArray.set(key,value)
});

et voici ma fonction d'appel:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function mytest(array, lang)
{
   var valuesArray = new Map();
   array.forEach(function(value,key) {
           if (value instanceof Object) {
            valuesArray.set(key, mytest(value, lang));
            console.log("inside an object map");
        }
        else {
 
            Promise.all(getTranslation(key, value))
                .then((value) => {
                    translatedArray.set(key, value)
                });
        }
    });
    return valuesArray;
}

je recupère une partie de mon tableau comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
Map {
  'Startpage' => Map { 'TranslationsSubSections' => Map {} },
  'Aboutpage' => Map {} }

Pas le tableau integral..

[Watilin]

J’ai l’impression que tu as deux variables dans ta fonction mytest qui remplissent le même rôle : valuesArray et translatedArray. À mon avis tu devrais retirer une des deux.

Pour le reste, je pense que tu n’es pas loin d’avoir quelque chose qui marche. Et je crois qu’en fin de compte, tu n’auras pas besoin de Promise.all. En fait, Promise.all pourrait même te poser problème car, vu que tu fais un certain nombre de requêtes réseau, il y a une certaine probabilité qu’au moins une d’entre elles échoue, et donc que Promise.all renvoie un résultat négatif. Malheureusement, il n’existe pas de fonction native Promise.most qui permettrait de ne pas tenir compte des échecs… Cela dit, rien ne nous empêche de la coder nous-mêmes.

Attention aux noms que tu donnes à tes arguments de fonctions. Il y a un manque de cohérence entre cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
function getTranslation(input, key) {
  ...

Et celle-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getTranslation(key, value) ...

Également, la variable body dans getTranslation n’est pas utilisée à la fin. J’imagine que c’est un oubli.

Un détail à propos de ta fonction récursive : à l’intérieur tu appelles un forEach. Je ne sais pas quelle profondeur peut atteindre ta structure de données, mais j’ai déjà vu certains scripts échouer à cause de la pile d’appels qui était surchargée. Dans ton cas tu peux limiter ce risque en remplaçant la fonction forEach par une boucle for..of combinée à Object.entries :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
   ...
   var valuesArray = new Map();
   for (let [ key, value ] of Object.entries(array)) {
      ...

[sinzen]

Je reprend ou j'en suis maintenant:

je mon promisse All comme ce-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function sendToGoogleTranslate(array, lang) {
 
    if (array && array.size > 0) {
        let myloop = mytest(array,lang);
        Promise.all(myloop).then(function(promises){
            console.log("Arriver en dernier");
        });
    }
}

Normalement je doit avoir mes promisse avant mon log?
ou je me trompe ? _{Je commence seulement a comprendre}

voici mes promisses:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
function doSometing(translatedArray,result,key){
    return new Promise((resolve) => {
        setTimeout(() =>{
            resolve(translatedArray.set(key,result));
        },1000)
    } ).then((value) => console.log("dosometings -> " + key));
}
 
function mytest(array, lang)
{
    var translatedArray = new Map();
    let promise = [];
    array.forEach(function(value,key) {
            if (value instanceof Object) {
                translatedArray.set(key, mytest(value, lang));
                console.log("inside an object map");
            }
            else {
                getTranslation(value, lang, (result) => {
                   promise.push(doSometing(translatedArray,result,key));
                });
                console.log(" value befor do someting"+value);
            }
        });
    return promise;
}

voici mon resultat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Arriver en dernier
Arriver en dernier
Arriver en dernier
dosometings -> TranslationSections
dosometings -> TitleTwo
dosometings -> TranslationSections
dosometings -> Intro
dosometings -> TranslationSections
dosometings -> Title
dosometings -> TranslationSections
dosometings -> TranslationSections
dosometings -> TitleTwo
dosometings -> Title
dosometings -> TitleTree
dosometings -> Intro
dosometings -> TitleTree
dosometings -> TranslationSections
dosometings -> TitleOne
dosometings -> Title
dosometings -> Intro
dosometings -> TitleOne
dosometings -> TitleOne
dosometings -> TitleTwo
dosometings -> TitleTree

Le resultat des promisses viens au fur et mesure et du coup mon message en console

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log("Arriver en dernier");

devrait venir en dernier..

[Watilin]

Le resultat des promisses viens au fur et mesure et du coup mon message en console

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log("Arriver en dernier");

devrait venir en dernier..

Il viendrait en dernier si tu n’avais pas demandé un setTimeout d’une seconde… Une seconde c’est énorme en comparaison du temps d’exécution d’une fonction JavaScript moyenne, même récursive. Tu peux t’en rendre compte en plaçant des performance.now() avant et après l’appel à mytest :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
    function sendToGoogleTranslate(array, lang) {
      if (array && array.size > 0) {
 
        let t0 = performance.now();
        let myloop = mytest(array, lang);
        let t1 = performance.now();
        console.log(t1 - t0); // affiche des millisecondes
 
        Promise.all(myloop).then(function (promises) {
          console.log("Arriver en dernier");
        });
      }
    }

Je suis à peu près certain que ça t’affichera un nombre qui est largement inférieur à 1000.

Je pense qu’il te manque la compréhension de ce qui est synchrone et ce qui ne l’est pas.

Une résolution de promesse est asynchrone.
Une fonction appelée avec setTimeout, setInterval ou requestAnimationFrame est asynchrone.
Un gestionnaire d’évènement, ce qui inclut les évènements ajax mais aussi les évènements souris/tactile et clavier, est asynchrone.
Un appel récursif, une boucle for ou while, une création d’objet, tout ça est synchrone.
Généralement, tout le reste est synchrone, mais il y a peut-être des cas que j’ai oubliés.

Sous les navigateurs actuels, (si on oublie la récente technologie des workers) JavaScript n’a qu’un seul fil (thread) d’exécution. Le code asynchrone est placé en attente, et est exécuté immédiatement dès que le thread est libre.

Imagine une fonction simple contenant uniquement des instructions synchrones :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function f() {
  let x = 5;
  x = x * 2;
  x = x + 1;
  console.log(x);
}

Cette fonction peut être visualisée comme un bloc indivisible sur le thread JavaScript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
        thread
          |
          |
       +-----+
       |     |
       | f() |
       |     |
       +-----+
          |
          |

Maintenant, imagine que nous plaçons une promesse dans cette fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function f() {
  let x = 5;
  x = x * 2;
  x = x + 1;
  Promise.resolve("coucou")
    .then(function g(value) { console.log(value); });
  console.log(x);
}

La fonction que nous passons à .then, que j’ai nommée g pour plus de lisibilité, est placée en file d’attente jusqu’à ce que le thread soit libéré. En l’occurence, quand la fonction f() se termine.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
        thread
          |
       +-----+
       |     |   .then(…)       file d’attente
       | f() ---------------> { g() }
       |     |                   |
       +-----+                   |
       +-----+ <-----------------/
       |     |
       | g() |
       |     |
       +-----+
          |

On peut voir que, en quelques sortes, un nouveau bloc a été « sorti » du bloc principal. Et on voit bien que la valeur de x (11) va s’afficher avant le « coucou ».

Quand tu utilises setTimeout, un délai est rajouté artificiellement pour retarder l’exécution de la fonction.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function f() {
  let x = 5;
  x = x * 2;
  x = x + 1;
  setTimeout(function g() {
    console.log("bonne nuit");
  }, 1000);
  console.log(x);
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        thread
          |
       +-----+
       |     |   setTimeout(g, délai)     file d’attente
       | f() --------------------------> { g() }
       |     |                             |
       +-----+                             |
          |                                | + délai
          ~                                |
          ~                                |
          |                                |
       +-----+ <---------------------------/
       |     |
       | g() |
       |     |
       +-----+
          |

Tout ça pour dire que je ne comprends pas pourquoi tu as voulu mettre un setTimeout dans ta promesse. Est-ce que je t’ai induit en erreur avec mes explications précédentes ?