How do I guarantee resolution order of multiple promises?

Question

Trying to learn some modern JS and in particular the ECMAScript 6 Promises. I'm playing with this simple test:

let slow = new Promise((resolve) => {
  setTimeout(function()
  {  
 console.log('slow');
 resolve(); 
  }, 2000, 'slow');
});

let instant = new Promise((resolve) => {
 console.log('instant');
 resolve(); 
});

let quick = new Promise((resolve) => {
  setTimeout(function()
  {  
 console.log('quick');
 resolve(); 
  }, 1000, 'quick');
});

Promise.all([slow, instant, quick]).then(function(results) {
  console.log('finished');
}, function(error) {
  console.log(error); 
});

What I want here is to start all Promises async at the same time. And log when they are all finished. In the console this shows as expected: "instant", "quick", "slow" and "finished".

However what if I wanted to be sure that "instant" doesn't echo/log before "slow" has completed? That is, I want the console to log "quick", "slow", "instant" and "finished"...but at the same time, they must still all start at the same time async.

How can I achieve this?

Answer 1

Part of the issue is the logging is happening in the setTimeout method, and not actually from the promise resolution.

const slow = new Promise((resolve) => {
  setTimeout(() => {
    console.log('slow - from setTimeout');
    resolve('slow - from resolve');
  }, 2000, 'slow');
});

const instant = new Promise((resolve) => {
  console.log('instant - from setTimeout');
  resolve('instant - from resolve');
});

const quick = new Promise((resolve) => {
  setTimeout(() => {
    console.log('quick - from setTimeout');
    resolve('quick -from resolve');
  }, 1000, 'quick');
});

Promise.all([slow, instant, quick]).then((results) => {
  console.log(results);
  console.log('finished');
}, (error) => {
  console.log(error);
});

Passing in the value to the resolve method will return everything in the Promise.all. The response comes back from each promise as an array, and you can iterate through those responses once all are complete.

Answer 2

So to be clear, what you want to do here is kick off all the promises at once and display the results of each promise in a particular order as they come in, correct?

In that case, I'd probably do it like this:

let slow = new Promise((resolve) => {
  setTimeout(function()
  {
    // Rather than log here, we resolve to the value we want to log
    resolve('slow');
  }, 2000, 'slow');
});

let instant = new Promise((resolve) => {
    resolve('instant');  
});

let quick = new Promise((resolve) => {
  setTimeout(function()
  {  
    resolve('quick');  
  }, 1000, 'quick');
});

// All Promises are now running. Let's print the results...

// First wait for the result of `slow`...
slow.then((result) => {
  // Result received...
  console.log(result);
  
  // Now wait for the result of instant...
  instant.then((result) => {
    
    // Result received...
    console.log(result);
    
    // Now wait for the result of quick...
    quick.then((result) => {
      
      // Result received...
      console.log(result);
      
    }).then((result) => {
      // Done
      console.log('finished');
    });
  });
});

Notice that unlike cchamberlain's answer, this method does not wait for all promises to resolve before it starts returning results. It returns the results as they come in, but without violating your requirement of keeping the results in-order. (To verify this, try changing the wait time of quick to 2500ms, and observe that its result is printed 500ms after instant.) Depending on your application, this may be desirable.

The above code is a bit messy, but thankfully with the new async/await syntax in ES2017 it can be made much cleaner:

let slow = new Promise((resolve) => {
  setTimeout(function()
  {
    // Rather than log here, we resolve to the value we want to log
    resolve('slow');
  }, 2000, 'slow');
});

let instant = new Promise((resolve) => {
    resolve('instant');  
});

let quick = new Promise((resolve) => {
  setTimeout(function()
  {  
    resolve('quick');  
  }, 1000, 'quick');
});

// All Promises are now running. Let's print the results...

async function logResults(...promises) {
  for (let promise of promises) {
    console.log(await promise);
  }
}

logResults(slow, instant, quick).then(() => console.log('finished'));

Try in Babel. Note: The above code doesn't currently work in modern browsers without Babel (as of October 2016). In future browsers it will.

Answer 3

UPDATED

You cannot kick them all off at the same time and expect the results to log in the order you are asking for with your current code. You could do something like the following:

let slow = new Promise((resolve) => {
  setTimeout(() => resolve('slow'), 2000)
})

let instant = new Promise((resolve) => {
  // In the future setImmediate can be used here to ensure async execution. For now, setTimeout with 0MS effectively does the same thing.
  setTimeout(() => resolve('instant'), 0)
})

let quick = new Promise((resolve) => {
  setTimeout(() => resolve('quick'), 1000)
})

Promise.all([slow, instant, quick]).then(function(results) {
  for(let result of results) {
    console.log(result)
  }
  console.log('finished')
}, function(err) {
  console.error(err)
})

This schedules them all then prints in the correct order upon completion.

Answer 4

If the requirements of Question are

"instant" doesn't echo/log before "slow"

and

but at the same time, they must still all start at the same time async.

you need only reorder the elements within iterable object passed to Promise.all(), or adjust the resulting array within .then() chained to Promise.all() before calling console.log() on each element of resulting array.

If requirement is

"How to wait for another promise?"

or

"How do I guarantee resolution order of multiple promises?"

see this Answer.

---

Promise.all passes an array of values from all the promises in the iterable object that it was passed. The array of values maintains the order of the original iterable object, not the order that the promises were resolved in. If something passed in the iterable array is not a promise, it's converted to one by Promise.resolve.

let slow = new Promise((resolve) => {
  setTimeout(function(value) {  
 resolve(value); 
  }, 2000, "slow");
});

let instant = new Promise((resolve) => {
 resolve("instant"); 
});

let quick = new Promise((resolve) => {
  setTimeout(function(value) {  
 resolve(value); 
  }, 1000, "quick");
});

Promise.all([slow, instant, quick]).then(function(results) {
  console.log("finished");
  console.log(results.join("\n"))
}, function(error) {
  console.log(error); 
});

Answer 5

Promise.all() is not necessary to return expected result.

You can utilize function calls to return the Promise constructor, pass the value which should be passed to console.log() to resolve() or reject(). Push the value to an array. Use .then() to process the returned Promise value, push the returned value to the array, return array to callback function parameter at next .then() in chain. Access the chained array of Promise values at last .then() in chain.

let results = [];

let pace = value => {console.log(value); results.push(value); return results};

let slow = () => new Promise((resolve) => {
  setTimeout((value) => {  
    resolve(value);  
  }, 2000, "slow");
});

let instant = () => new Promise((resolve) => {
    resolve("instant");  
});

let quick = () => new Promise((resolve) => {
  setTimeout((value) => {  
    resolve(value);  
  }, 1000, "quick");
});

slow().then(pace)
.then(instant).then(pace)
.then(quick).then(pace)
.then(res => console.log("finished, results:", res))
.catch(error => console.log(error));

Answer 6

First of all, your code already starts all 3 promises at the "same time". You are also logging "finished" correctly. From what I understand from the question, you want to handle the results of the promises in sequential order, but have them execute in parallel.

let slow = new Promise((resolve) => {
  setTimeout(function()
  {  
    resolve();
  }, 2000);
});

let instant = new Promise((resolve) => {
    resolve();
});

let quick = new Promise((resolve) => {
  setTimeout(function()
  {  
    resolve();
  }, 1000);
});

instant.then(function(results) {
  console.log("instant");
}).then(function(){return quick;}).then(function(results) {
  console.log("quick");
}).then(function(){return slow;}).then(function(results) {
  console.log("slow");
}).then(function(){ return Promise.all([slow, instant, quick]);}).then(function(results) {
  console.log('finished');
}).catch(function(error) {
  console.log(error);   
});

This will guarantee you'll handle the resolutions in order.

Note: In your example, you use setTimeout, which is guaranteed to call the handlers in the order of the time, so your existing code will already log "instant", "quick", "slow", "finished". The code I provided guarantees this order for any set of promises with different resolve times.