web-dev-qa-db-fra.com

Comment attendre que la promesse se termine avant le retour de la fonction

Question de base sur la promesse:

console.log('Promise START');

function makeFullJSON(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time, [time]);
  })
}

var p1 = makeFullJSON(1000);
var p2 = makeFullJSON(500);
var p3 = makeFullJSON(750);

p1.then(array => {
  console.log('Promise 1 complete', array);
});

p2.then(array => {
  console.log('Promise 2 complete', array);
});

p3.then(array => {
  console.log('Promise 3 complete', array);
});

Promise.all([p1, p2, p3]).then(arrayOfAllResolvedValues => {
  console.log('Array of resolved values:', arrayOfAllResolvedValues);
});

console.log('Promise END');

La sortie du code est:

Promise START
Promise END
Promise 2 complete [ 500 ]
Promise 3 complete [ 750 ]
Promise 1 complete [ 1000 ]
Array of resolved values: [ [ 1000 ], [ 500 ], [ 750 ] ]

Comment réécrire le code, de telle sorte que la sortie soit:

Promise START
Promise 2 complete [ 500 ]
Promise 3 complete [ 750 ]
Promise 1 complete [ 1000 ]
Array of resolved values: [ [ 1000 ], [ 500 ], [ 750 ] ]
Promise END
javascriptpromise
9
S. Vaghar

Tout ce que vous voulez faire après l'achèvement va dans la fonction flèche à laquelle vous passez ensuite. 

    console.log('Promise START');

    function makeFullJSON(time) {
       return new Promise((resolve, reject) => {
       setTimeout(resolve, time, [time]); 
    })}

    var p1 = makeFullJSON(1000);
    var p2 = makeFullJSON(500);
    var p3 = makeFullJSON(750);

    p1.then(array => {
        console.log('Promise 1 complete', array);});

    p2.then(array => {
        console.log('Promise 2 complete', array););

    p3.then(array => {
        console.log('Promise 3 complete', array);});

    Promise.all([p1, p2, p3]).then(arrayOfAllResolvedValues => {
        console.log('Array of resolved values:', arrayOfAllResolvedValues);

        console.log('Promise END');
    });

Afin d'abandonner l'exécution immédiate du programme et de commencer à écrire du code qui ne se produirait qu'après la résolution des 3 promesses, il semblerait que vous souhaitiez que cela se produise, alors je vous recommande de créer une nouvelle fonction directement sous votre code, afin de contenir du code que vous feriez comme arriver après la résolution, et passer cette fonction comme: Promise.all([p1, p2, p3]).then(newFunctionName). Il serait peut-être plus facile pour vous de le visualiser de cette façon, du moins jusqu'à ce que vous soyez habitué à réfléchir à la manière dont cela fonctionne avec précision.

4
Kent Weigel

Commencez par corriger l'erreur de syntaxe. Déplacez ensuite le fichier console.log à la fin du processus complet:

console.log('Promise START');

function makeFullJSON(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time, [time]);
  })}

var p1 = makeFullJSON(1000);
var p2 = makeFullJSON(500);
var p3 = makeFullJSON(750);

p1.then(array => {
  console.log('Promise 1 complete', array);});

p2.then(array => {
  console.log('Promise 2 complete', array);});  // fixed syntax error here

p3.then(array => {
  console.log('Promise 3 complete', array);});

Promise.all([p1, p2, p3]).then(arrayOfAllResolvedValues => {
  console.log('Array of resolved values:', arrayOfAllResolvedValues);
  console.log('Promise END');
});

2
rasmeister

Si la réponse évidente de placer la console.log('Promise END') ne fait pas flotter votre bateau, pourquoi pas ceci?

//didnt change anything at all above here
Promise.all([p1, p2, p3]).then(arrayOfAllResolvedValues => {
    console.log('Array of resolved values:', arrayOfAllResolvedValues);
}).then(() => {
    console.log('Promise END');
});

Si vous souhaitez séquencer une opération après que toutes les promesses aient été remplies, vous devez séquencer avec then() comme vous le faites lorsque vous imprimez vos valeurs de tableau.

1
JSelser

Utilisez async/await:

(async () => {
  console.log('Promise START');

  function makeFullJSON(time) {
    return new Promise((resolve, reject) => {
    setTimeout(resolve, time, [time]); 
  })}

  var p1 = makeFullJSON(1000);
  var p2 = makeFullJSON(500);
  var p3 = makeFullJSON(750);

  p1.then(array => {
    console.log('Promise 1 complete', array);});

  p2.then(array => {
    console.log('Promise 2 complete', array);});

  p3.then(array => {
    console.log('Promise 3 complete', array);});

  console.log('Array of resolved values:', await Promise.all([p1, p2, p3]));

  console.log('Promise END');
})();

0
jib