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

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

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

Amount of permutations on an NxNxN Rubik's Cube

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

How to Make a Beautiful Stacked 3D Plot

Fundamental Solution of the Pell Equation

Can a new player join a group only when a new campaign starts?

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?

Is it fair for a professor to grade us on the possession of past papers?

How could we fake a moon landing now?

Why are both D and D# fitting into my E minor key?

Significance of Cersei's obsession with elephants?

What does "lightly crushed" mean for cardamon pods?

Is "Reachable Object" really an NP-complete problem?

What are the out-of-universe reasons for the references to Toby Maguire-era Spider-Man in ITSV

Is the Standard Deduction better than Itemized when both are the same amount?

How to answer "Have you ever been terminated?"

How to convince students of the implication truth values?

Irreducible of finite Krull dimension implies quasi-compact?

Integration Help

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

Do I really need to have a message in a novel to appeal to readers?

When the Haste spell ends on a creature, do attackers have advantage against that creature?

Does classifying an integer as a discrete log require it be part of a multiplicative group?



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 8 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

“%fieldName is a required field.”, in Magento2 REST API Call for GET Method Type The Next...

How to change City field to a dropdown in Checkout step Magento 2Magento 2 : How to change UI field(s)...

變成蝙蝠會怎樣? 參考資料 外部連結 导航菜单Thomas Nagel, "What is it like to be a...