Ttykuu

I'm trying to wrap my mind around promises in JavaScript. I was under the illusion that once a Promise was resolved it could never go back to rejected. To test that I wrote a little script. I see that the first messages that come back are the resolve messages "1 resolve 2" etc. I expected the first message to be "0 reject 1".

for (let i = 0; i < 10; i++) 
 let p = new Promise((resolve, reject) => 

 let a = 1 + (i % 2)

 if (a === 2) 
 resolve(i + ' resolve ' + a)
 else 
 reject(i + ' reject ' + a)
 
 )

 p.then((message) => 
 console.log(message)
 ).catch((message) => 
 console.log(message)
 )

at the console:

[Log] 1 resolve 2
[Log] 3 resolve 2
[Log] 5 resolve 2
[Log] 7 resolve 2
[Log] 9 resolve 2
[Log] 0 reject 1
[Log] 2 reject 1
[Log] 4 reject 1
[Log] 6 reject 1
[Log] 8 reject 1
< Promise status: "pending"

thanks for you help....

After reading

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

I got to this code. The catch is removed.

for (let i = 0; i < 10; i++) 
let p = new Promise((resolve, reject) => 

 let a = 1 + (i % 2)

 if (a === 2) 
 resolve(i + ' resolve ' + a)
 else 
 reject(i + ' reject ' + a)
 

)

p.then((message) => 
 console.log(message)
, failed => 
 console.log(failed)
) 

at the console:

[Log] 0 reject 1
[Log] 1 resolve 2
[Log] 2 reject 1
[Log] 3 resolve 2
[Log] 4 reject 1
[Log] 5 resolve 2
[Log] 6 reject 1
[Log] 7 resolve 2
[Log] 8 reject 1
[Log] 9 resolve 2
< Promise status: "pending"

You can see what's going on under the hood by using your the console of your browser's dev tools and, possibly, setting break points (this articles might be helpful if u're using Chrome or Firefox):

As you can see, all your 10 promises are created before any of them are executed (resolve/reject).

Interestingly, in your code the resolved promises are handled first.

If you define the handlers in two separate definitions, you'll get the expected results:

p.then((message) => 
 console.log(message)
 )
p.catch((message) => 
 console.log(message)
 )

Output:

The point is, Promises are made to be used as Asynchronous calls, so when you execute your loop and for each iteration you creates a new promise, you are creating new instances, and each one of those can be executed in their own time.

But what this even means? The explanation is, when you create 10 new Promises in a loop, each promise will be executed in his own time and probablly will mess up with your promise solving order.

What you can do to solve it? You can use await command to wait each promise to solve, like the code bellow:

for (let i = 0; i < 10; i++) 
 let p = new Promise((resolve, reject) => 

 let a = 1 + (i % 2)

 if (a === 2) 
 resolve(i + ' resolve ' + a)
 else 
 reject(i + ' reject ' + a)
 
 )

 await p.then((message) => 
 console.log(message)
 ).catch((message) => 
 console.log(message)
 )

Or you could try use Promise.all() which will basically solve the order for you, see the official docs here

Because JavaScript are mono thread :

• promise


• eventListener


• setTimeout


• setInterval

previous listed method are not part of javascript enterpreter (V8 Engine for example), it delegate to the event loop which are part of browser or nodejs. more information here

Basically this code are delegate to 3th party (node, browser) which will decide himself when and on which order this collection of microtasks will be executed and return to the main thread.

is Why Following code :

 let p = new Promise((resolve, reject) => 
		 resolve('micro task thread');
 );

 p.then((message) => 
 console.log(message)
 ).catch((message) => 
 console.log(message)
 );
 console.log('main thread');

will print "main thread" then "micro task thread" but you don't have any obvious delayed code. Is because all main thread function call will be execute before doing task on eventLoop.

Most of the time, event loop will execute the collection as first come first rendered.

I did found a solution here:
MDN promise then

for (let i = 0; i < 10; i++) 
 let p = new Promise((resolve, reject) => 
 let a = 1 + (i % 2)

 if (a === 2) 
 resolve(i + ' resolve ' + a)
 else 
 reject(i + ' reject ' + a)
 
 )

 p.then((message) => 
 console.log(message)
 , failed => 
 console.log(failed)
 )