11

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"}
  • 3
    You are creating new promise on every iteration – brk Apr 17 at 18:44
  • 5
    Is your question why you see the resolved promises before the rejected? I.e. why is the output [1, 3, 5, 7, 9, 0, 2, 4, 6, 8] instead of [0, 1, 2, 3, 4, ...]? – junvar Apr 17 at 18:54
  • 2
    Yes Junvar. That is my question. – Edwin Apr 17 at 18:58
  • 5
    99% sure it's because the .then and .catch each take a tick on the event loop. So the rejections are all a single tick behind your resolves. – jhpratt Apr 17 at 19:07
  • 1
    I'd add that 1% to that. – Michał Kapracki Apr 17 at 19:38
4

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):

enter image description here

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:

enter image description here

  • i am so surprize by the conclusion of your answer. I never imagined than chain vs multiple instruction can have this huge impact. Really good sharing – Yanis-git Apr 17 at 19:55
2

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

  • 1
    well, you can remove the .then if you're using await – pushkin Apr 17 at 19:45
  • 1
    Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise. – Edwin Apr 17 at 19:49
0

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.

  • @Edwin i have not understand what you try to say. Ludovico post interesting answer. And my answer contain, i think, some tips to understand how async traitment work under the hood. – Yanis-git Apr 17 at 19:57
  • Fair question. Yes you gave a good explanation of how the event loop works and how promise fits in there. Ludvico posted a solution that produced the expected result.That still did not explain to me enough why it was happening. The key to understanding this was at MDN saying: The catch() is calling Promise.prototype.then(undefined, onrejected). Then I looked at the description of then Promise.prototype.then(). Under the syntax header I found this. – Edwin Apr 18 at 5:20
  • you can see much mind blown with following case : all case posted here :o – Yanis-git Apr 18 at 5:37
0

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

promise.catch() is calling promise.then(undefined, onreject). That is why resolve allways appeared first.

  • I will note that though this is absolutely valid, most developers will never wrote code like that (and some would probably be confused as to it's behavior). – jhpratt Apr 17 at 20:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.