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

Dating a Former Employee

How to deal with a team lead who never gives me credit?

old style "caution" boxes

An adverb for when you're not exaggerating

Why wasn't DOSKEY integrated with COMMAND.COM?

Circuit to "zoom in" on mV fluctuations of a DC signal?

Delete nth line from bottom

Is there such thing as an Availability Group failover trigger?

When a candle burns, why does the top of wick glow if bottom of flame is hottest?

Withdrew £2800, but only £2000 shows as withdrawn on online banking; what are my obligations?

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

Denied boarding although I have proper visa and documentation. To whom should I make a complaint?

What's the meaning of "fortified infraction restraint"?

What would be the ideal power source for a cybernetic eye?

Crossing US/Canada Border for less than 24 hours

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

How does the math work when buying airline miles?

What does this Jacques Hadamard quote mean?

Using audio cues to encourage good posture

How could we fake a moon landing now?

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

Most bit efficient text communication method?

What is the meaning of the new sigil in Game of Thrones Season 8 intro?

Should I use a zero-interest credit card for a large one-time purchase?



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











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

    – Kev
    10 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
    10 hours ago






  • 2





    Yes Junvar. That is my question.

    – Edwin
    10 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
    10 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
    10 hours ago











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

    – Kev
    10 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
    10 hours ago






  • 2





    Yes Junvar. That is my question.

    – Edwin
    10 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
    10 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 3 hours ago









Boann

37.5k1291123




37.5k1291123










asked 10 hours ago









EdwinEdwin

614




614








  • 3





    You are creating new promise on every iteration

    – brk
    10 hours ago











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

    – Kev
    10 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
    10 hours ago






  • 2





    Yes Junvar. That is my question.

    – Edwin
    10 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
    10 hours ago














  • 3





    You are creating new promise on every iteration

    – brk
    10 hours ago











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

    – Kev
    10 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
    10 hours ago






  • 2





    Yes Junvar. That is my question.

    – Edwin
    10 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
    10 hours ago








3




3





You are creating new promise on every iteration

– brk
10 hours ago





You are creating new promise on every iteration

– brk
10 hours ago













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

– Kev
10 hours ago





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

– Kev
10 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
10 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
10 hours ago




2




2





Yes Junvar. That is my question.

– Edwin
10 hours ago





Yes Junvar. That is my question.

– Edwin
10 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
10 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
10 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
    9 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
    9 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
    9 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
    9 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
    9 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
    9 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
    9 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 9 hours ago









ludovicoludovico

896




896













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









Esdras XavierEsdras Xavier

45017




45017








  • 1





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

    – pushkin
    9 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
    9 hours ago














  • 1





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

    – pushkin
    9 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
    9 hours ago








1




1





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

– pushkin
9 hours ago





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

– pushkin
9 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
9 hours ago





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

– Edwin
9 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
    9 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
    9 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 9 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
    9 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
    9 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
9 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
9 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
    9 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
    9 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 6 hours ago









pushkin

4,726113055




4,726113055










answered 9 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
    9 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
    9 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
9 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
9 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

Taj Mahal Inhaltsverzeichnis Aufbau | Geschichte | 350-Jahr-Feier | Heutige Bedeutung | Siehe auch |...

Baia Sprie Cuprins Etimologie | Istorie | Demografie | Politică și administrație | Arii naturale...

Nicolae Petrescu-Găină Cuprins Biografie | Opera | In memoriam | Varia | Controverse, incertitudini...