Javascript Promise.prototype.then() ordering problem

Question

I am new to JS. I just went to MDN website https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then to play around the example given. I changed the example to

var promise1 = new Promise(function(resolve, reject) {
  resolve('Success!');
});

promise1
  .then(value => console.log(value))
  .then(console.log('1'))
  .then(console.log('2'))
  .then(console.log('3'))
  .then(console.log('4'))
  .then(console.log('5'));

I expect the result to be Success! then 1 and all the way to 5. However, the result is 1 to 5 and then Success! It seems a little weird to me. I have already chained it well but not 'branching' it. Thanks a lot

The `console.log('1')`, ... are called and the result of the `log` is passed as callback to the `then` — t.niese, Jan 05 '19 at 17:43
Not exact duplicates but the same reason [Why does click event handler fire immediately upon page load?](https://stackoverflow.com/questions/7102413/why-does-click-event-handler-fire-immediately-upon-page-load), [Calling functions with setTimeout()](https://stackoverflow.com/questions/3800512/calling-functions-with-settimeout), [Why is my function call that should be scheduled by setTimeout executed immediately?](https://stackoverflow.com/questions/2037203) — t.niese, Jan 05 '19 at 17:45
In `foo(bar())`, `bar` is always executed **before** `foo`. The return value of `bar` is passed to `foo`. — Felix Kling, Jan 05 '19 at 17:45
Thanks, everyone! It took me some time to think about what you have said and then I realized it is the difference between passing func() as an argument and just passing func. I would remind myself later should I encounter similar problems! Thanks again. It helps a lot. — Ari.Chau, Jan 05 '19 at 17:58

score 2 · Answer 1 · answered Jan 05 '19 at 17:47

2

You are giving the result of the console.log expressions to then, instead of functions that will log the numbers when executed:

var promise1 = new Promise(function(resolve, reject) {
  resolve('Success!');
});

promise1
  .then(value => console.log(value))
  .then(() => console.log('1'))
  .then(() => console.log('2'))
  .then(() => console.log('3'))
  .then(() => console.log('4'))
  .then(() => console.log('5'));

answered Jan 05 '19 at 17:47

JJWesterkamp

7,559
1
22
28

AHHHHH!!!! Yay, that's right. I should pass a function but not the result to the .then(). Thanks a lot! – Ari.Chau Jan 05 '19 at 17:55
@Ari.Chau Glad to help you out! – JJWesterkamp Jan 05 '19 at 17:58

score -4 · Answer 2 · answered Jan 05 '19 at 17:43

-4

That is because you've used then(console.log(...)) This will executed console.log and use the result as the parameter passed to then

It is something like this:

var promise1 = new Promise(function(resolve, reject) {
  resolve('Success!');
});

var par1 = console.log('1'),
    par2 = console.log('2'),
    par3 = console.log('3'),
    par4 = console.log('4'),
    par5 = console.log('5');

promise1
  .then(value => console.log(value))
  .then(par1)
  .then(par2)
  .then(par3)
  .then(par4)
  .then(par5);

answered Jan 05 '19 at 17:43

Titus

22,031
1
23
33

The output is still the same. The other answer has it right. – trincot Jan 05 '19 at 17:57
@trincot I wan't trying to create the correct output. I was trying to explain why he gets this output. – Titus Jan 05 '19 at 17:58
3

I think most did not understand. Usually people give an answer with an explanation and a solution... You have given an explanation and another way to reproduce the problem. :/ – trincot Jan 05 '19 at 18:02

Javascript Promise.prototype.then() ordering problem

2 Answers2