Why does the resolve message appear first? Announcing the arrival of Valued Associate #679:...

What is homebrew?

Using et al. for a last / senior author rather than for a first author

Why aren't air breathing engines used as small first stages

For a new assistant professor in CS, how to build/manage a publication pipeline

How does the math work when buying airline miles?

Do jazz musicians improvise on the parent scale in addition to the chord-scales?

Is there any way for the UK Prime Minister to make a motion directly dependent on Government confidence?

Why do we bend a book to keep it straight?

How to react to hostile behavior from a senior developer?

Would "destroying" Wurmcoil Engine prevent its tokens from being created?

If my PI received research grants from a company to be able to pay my postdoc salary, did I have a potential conflict interest too?

Extracting terms with certain heads in a function

How to find all the available tools in mac terminal?

Where are Serre’s lectures at Collège de France to be found?

How to tell that you are a giant?

Dating a Former Employee

How do I make this wiring inside cabinet safer? (Pic)

Delete nth line from bottom

Is there such thing as an Availability Group failover trigger?

Is it common practice to audition new musicians 1-2-1 before rehearsing with the entire band?

What does "lightly crushed" mean for cardamon pods?

Crossing US/Canada Border for less than 24 hours

Fantasy story; one type of magic grows in power with use, but the more powerful they are, they more they are drawn to travel to their source

What is the longest distance a player character can jump in one leap?



Why does the resolve message appear first?



Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!Why is using “for…in” with array iteration a bad idea?How does JavaScript .prototype work?How do I make the first letter of a string uppercase in JavaScript?What does “use strict” do in JavaScript, and what is the reasoning behind it?What is JSONP, and why was it created?Why does Google prepend while(1); to their JSON responses?Why does ++[[]][+[]]+[+[]] return the string “10”?How does data binding work in AngularJS?How does Facebook disable the browser's integrated Developer Tools?ECMAScript 6 Chaining Promises





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







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









share|improve this question




















  • 3





    You are creating new promise on every iteration

    – brk
    6 hours ago











  • You have 10 promises, they don't "go back to rejected" like you said.

    – Kev
    6 hours ago






  • 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
    6 hours ago






  • 2





    Yes Junvar. That is my question.

    – Edwin
    6 hours ago






  • 4





    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
    6 hours ago


















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









share|improve this question




















  • 3





    You are creating new promise on every iteration

    – brk
    6 hours ago











  • You have 10 promises, they don't "go back to rejected" like you said.

    – Kev
    6 hours ago






  • 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
    6 hours ago






  • 2





    Yes Junvar. That is my question.

    – Edwin
    6 hours ago






  • 4





    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
    6 hours ago














11












11








11


3






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









share|improve this question
















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






javascript es6-promise






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 6 mins ago









Boann

37.5k1291123




37.5k1291123










asked 6 hours ago









EdwinEdwin

614




614








  • 3





    You are creating new promise on every iteration

    – brk
    6 hours ago











  • You have 10 promises, they don't "go back to rejected" like you said.

    – Kev
    6 hours ago






  • 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
    6 hours ago






  • 2





    Yes Junvar. That is my question.

    – Edwin
    6 hours ago






  • 4





    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
    6 hours ago














  • 3





    You are creating new promise on every iteration

    – brk
    6 hours ago











  • You have 10 promises, they don't "go back to rejected" like you said.

    – Kev
    6 hours ago






  • 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
    6 hours ago






  • 2





    Yes Junvar. That is my question.

    – Edwin
    6 hours ago






  • 4





    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
    6 hours ago








3




3





You are creating new promise on every iteration

– brk
6 hours ago





You are creating new promise on every iteration

– brk
6 hours ago













You have 10 promises, they don't "go back to rejected" like you said.

– Kev
6 hours ago





You have 10 promises, they don't "go back to rejected" like you said.

– Kev
6 hours ago




5




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
6 hours ago





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
6 hours ago




2




2





Yes Junvar. That is my question.

– Edwin
6 hours ago





Yes Junvar. That is my question.

– Edwin
6 hours ago




4




4





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
6 hours ago





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
6 hours ago












4 Answers
4






active

oldest

votes


















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






share|improve this answer
























  • 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
    5 hours ago



















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






share|improve this answer



















  • 1





    well, you can remove the .then if you're using await

    – pushkin
    5 hours ago






  • 1





    Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.

    – Edwin
    5 hours ago



















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.






share|improve this answer
























  • @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
    5 hours ago



















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





share|improve this answer


























  • 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
    5 hours ago












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55734046%2fwhy-does-the-resolve-message-appear-first%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























4 Answers
4






active

oldest

votes








4 Answers
4






active

oldest

votes









active

oldest

votes






active

oldest

votes









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






share|improve this answer
























  • 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
    5 hours ago
















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






share|improve this answer
























  • 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
    5 hours ago














4












4








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






share|improve this answer













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







share|improve this answer












share|improve this answer



share|improve this answer










answered 6 hours ago









ludovicoludovico

875




875













  • 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
    5 hours ago



















  • 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
    5 hours ago

















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
5 hours ago





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
5 hours ago













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






share|improve this answer



















  • 1





    well, you can remove the .then if you're using await

    – pushkin
    5 hours ago






  • 1





    Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.

    – Edwin
    5 hours ago
















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






share|improve this answer



















  • 1





    well, you can remove the .then if you're using await

    – pushkin
    5 hours ago






  • 1





    Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.

    – Edwin
    5 hours ago














2












2








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






share|improve this answer













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







share|improve this answer












share|improve this answer



share|improve this answer










answered 6 hours ago









Esdras XavierEsdras Xavier

45017




45017








  • 1





    well, you can remove the .then if you're using await

    – pushkin
    5 hours ago






  • 1





    Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.

    – Edwin
    5 hours ago














  • 1





    well, you can remove the .then if you're using await

    – pushkin
    5 hours ago






  • 1





    Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.

    – Edwin
    5 hours ago








1




1





well, you can remove the .then if you're using await

– pushkin
5 hours ago





well, you can remove the .then if you're using await

– pushkin
5 hours ago




1




1





Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.

– Edwin
5 hours ago





Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.

– Edwin
5 hours ago











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.






share|improve this answer
























  • @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
    5 hours ago
















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.






share|improve this answer
























  • @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
    5 hours ago














0












0








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.






share|improve this answer













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.






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





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






share|improve this answer












share|improve this answer



share|improve this answer










answered 5 hours ago









Yanis-gitYanis-git

2,6291725




2,6291725













  • @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
    5 hours ago



















  • @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
    5 hours ago

















@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
5 hours ago





@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
5 hours ago











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





share|improve this answer


























  • 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
    5 hours ago
















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





share|improve this answer


























  • 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
    5 hours ago














0












0








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





share|improve this answer















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






share|improve this answer














share|improve this answer



share|improve this answer








edited 3 hours ago









pushkin

4,726113055




4,726113055










answered 5 hours ago









EdwinEdwin

614




614













  • 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
    5 hours ago



















  • 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
    5 hours ago

















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
5 hours ago





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
5 hours ago


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55734046%2fwhy-does-the-resolve-message-appear-first%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Why do type traits not work with types in namespace scope?What are POD types in C++?Why can templates only be...

Will tsunami waves travel forever if there was no land?Why do tsunami waves begin with the water flowing away...

Simple Scan not detecting my scanner (Brother DCP-7055W)Brother MFC-L2700DW printer can print, can't...