How to wait for promise to finish before function returns

Question

Basic promise question:

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');

The code output is:

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

How do you rewrite the code, such that output is:

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

Answer 1

Anything that you want to happen after the completion goes in the arrow function that you pass to then.

    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')
    })

In order to abandon immediate program execution, and start writing code which would happen only after all 3 promises resolve, as it sounds like you want to happen, then I would recommend creating a new function directly below your code, to contain code which you would like to happen after resolution, and pass that function like: Promise.all([p1, p2, p3]).then(newFunctionName). It might be easier for you to visualize it that way, at least until you get used to thinking about how it works precisely.

Answer 2

First fix the syntax error. Then move the console.log to where the entire process ends:

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');
});