Why does the resolve message appear first?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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
|
show 1 more comment
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
3
You are creating new promise on every iteration
– brk
yesterday
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
yesterday
2
Yes Junvar. That is my question.
– Edwin
yesterday
5
99% sure it's because the.then
and.catch
each take a tick on the event loop. So the rejections are all a single tick behind your resolves.
– jhpratt
yesterday
1
I'd add that 1% to that.
– Michał Kapracki
yesterday
|
show 1 more comment
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
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
javascript es6-promise
edited yesterday
Boann
37.5k1291123
37.5k1291123
asked yesterday
EdwinEdwin
614
614
3
You are creating new promise on every iteration
– brk
yesterday
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
yesterday
2
Yes Junvar. That is my question.
– Edwin
yesterday
5
99% sure it's because the.then
and.catch
each take a tick on the event loop. So the rejections are all a single tick behind your resolves.
– jhpratt
yesterday
1
I'd add that 1% to that.
– Michał Kapracki
yesterday
|
show 1 more comment
3
You are creating new promise on every iteration
– brk
yesterday
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
yesterday
2
Yes Junvar. That is my question.
– Edwin
yesterday
5
99% sure it's because the.then
and.catch
each take a tick on the event loop. So the rejections are all a single tick behind your resolves.
– jhpratt
yesterday
1
I'd add that 1% to that.
– Michał Kapracki
yesterday
3
3
You are creating new promise on every iteration
– brk
yesterday
You are creating new promise on every iteration
– brk
yesterday
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
yesterday
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
yesterday
2
2
Yes Junvar. That is my question.
– Edwin
yesterday
Yes Junvar. That is my question.
– Edwin
yesterday
5
5
99% sure it's because the
.then
and .catch
each take a tick on the event loop. So the rejections are all a single tick behind your resolves.– jhpratt
yesterday
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
yesterday
1
1
I'd add that 1% to that.
– Michał Kapracki
yesterday
I'd add that 1% to that.
– Michał Kapracki
yesterday
|
show 1 more comment
4 Answers
4
active
oldest
votes
You can see what's going on under the hood by using your the console of your browser's dev tools and, possibly, setting break points (this articles might be helpful if u're using Chrome or Firefox):
As you can see, all your 10 promises are created before any of them are executed (resolve/reject).
Interestingly, in your code the resolved promises are handled first.
If you define the handlers in two separate definitions, you'll get the expected results:
p.then((message) => {
console.log(message)
})
p.catch((message) => {
console.log(message)
})
Output:
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
yesterday
add a comment |
The point is, Promises are made to be used as Asynchronous calls, so when you execute your loop and for each iteration you creates a new promise, you are creating new instances, and each one of those can be executed in their own time.
But what this even means? The explanation is, when you create 10 new Promises in a loop, each promise will be executed in his own time and probablly will mess up with your promise solving order.
What you can do to solve it? You can use await
command to wait each promise to solve, like the code bellow:
for (let i = 0; i < 10; i++) {
let p = new Promise((resolve, reject) => {
let a = 1 + (i % 2)
if (a === 2) {
resolve(i + ' resolve ' + a)
} else {
reject(i + ' reject ' + a)
}
})
await p.then((message) => {
console.log(message)
}).catch((message) => {
console.log(message)
})
}
Or you could try use Promise.all()
which will basically solve the order for you, see the official docs here
1
well, you can remove the.then
if you're usingawait
– pushkin
yesterday
1
Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.
– Edwin
yesterday
add a comment |
Because JavaScript are mono thread :
- promise
- eventListener
- setTimeout
- setInterval
previous listed method are not part of javascript enterpreter (V8 Engine for example), it delegate to the event loop which are part of browser or nodejs. more information here
Basically this code are delegate to 3th party (node, browser) which will decide himself when and on which order this collection of microtasks will be executed and return to the main thread.
is Why Following code :
let p = new Promise((resolve, reject) => {
resolve('micro task thread');
});
p.then((message) => {
console.log(message)
}).catch((message) => {
console.log(message)
});
console.log('main thread');
will print "main thread" then "micro task thread" but you don't have any obvious delayed code. Is because all main thread function call will be execute before doing task on eventLoop.
Most of the time, event loop will execute the collection as first come first rendered.
@Edwin i have not understand what you try to say. Ludovico post interesting answer. And my answer contain, i think, some tips to understand how async traitment work under the hood.
– Yanis-git
yesterday
Fair question. Yes you gave a good explanation of how the event loop works and how promise fits in there. Ludvico posted a solution that produced the expected result.That still did not explain to me enough why it was happening. The key to understanding this was at MDN saying: The catch() is calling Promise.prototype.then(undefined, onrejected). Then I looked at the description of then Promise.prototype.then(). Under the syntax header I found this.
– Edwin
21 hours ago
you can see much mind blown with following case : all case posted here :o
– Yanis-git
21 hours ago
add a comment |
I did found a solution here:
MDN promise then
for (let i = 0; i < 10; i++) {
let p = new Promise((resolve, reject) => {
let a = 1 + (i % 2)
if (a === 2) {
resolve(i + ' resolve ' + a)
} else {
reject(i + ' reject ' + a)
}
})
p.then((message) => {
console.log(message)
}, failed => {
console.log(failed)
})
}
promise.catch() is calling promise.then(undefined, onreject). That is why resolve allways appeared first.
I will note that though this is absolutely valid, most developers will never wrote code like that (and some would probably be confused as to it's behavior).
– jhpratt
yesterday
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
You can see what's going on under the hood by using your the console of your browser's dev tools and, possibly, setting break points (this articles might be helpful if u're using Chrome or Firefox):
As you can see, all your 10 promises are created before any of them are executed (resolve/reject).
Interestingly, in your code the resolved promises are handled first.
If you define the handlers in two separate definitions, you'll get the expected results:
p.then((message) => {
console.log(message)
})
p.catch((message) => {
console.log(message)
})
Output:
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
yesterday
add a comment |
You can see what's going on under the hood by using your the console of your browser's dev tools and, possibly, setting break points (this articles might be helpful if u're using Chrome or Firefox):
As you can see, all your 10 promises are created before any of them are executed (resolve/reject).
Interestingly, in your code the resolved promises are handled first.
If you define the handlers in two separate definitions, you'll get the expected results:
p.then((message) => {
console.log(message)
})
p.catch((message) => {
console.log(message)
})
Output:
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
yesterday
add a comment |
You can see what's going on under the hood by using your the console of your browser's dev tools and, possibly, setting break points (this articles might be helpful if u're using Chrome or Firefox):
As you can see, all your 10 promises are created before any of them are executed (resolve/reject).
Interestingly, in your code the resolved promises are handled first.
If you define the handlers in two separate definitions, you'll get the expected results:
p.then((message) => {
console.log(message)
})
p.catch((message) => {
console.log(message)
})
Output:
You can see what's going on under the hood by using your the console of your browser's dev tools and, possibly, setting break points (this articles might be helpful if u're using Chrome or Firefox):
As you can see, all your 10 promises are created before any of them are executed (resolve/reject).
Interestingly, in your code the resolved promises are handled first.
If you define the handlers in two separate definitions, you'll get the expected results:
p.then((message) => {
console.log(message)
})
p.catch((message) => {
console.log(message)
})
Output:
answered yesterday
ludovicoludovico
936
936
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
yesterday
add a comment |
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
yesterday
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
yesterday
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
yesterday
add a comment |
The point is, Promises are made to be used as Asynchronous calls, so when you execute your loop and for each iteration you creates a new promise, you are creating new instances, and each one of those can be executed in their own time.
But what this even means? The explanation is, when you create 10 new Promises in a loop, each promise will be executed in his own time and probablly will mess up with your promise solving order.
What you can do to solve it? You can use await
command to wait each promise to solve, like the code bellow:
for (let i = 0; i < 10; i++) {
let p = new Promise((resolve, reject) => {
let a = 1 + (i % 2)
if (a === 2) {
resolve(i + ' resolve ' + a)
} else {
reject(i + ' reject ' + a)
}
})
await p.then((message) => {
console.log(message)
}).catch((message) => {
console.log(message)
})
}
Or you could try use Promise.all()
which will basically solve the order for you, see the official docs here
1
well, you can remove the.then
if you're usingawait
– pushkin
yesterday
1
Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.
– Edwin
yesterday
add a comment |
The point is, Promises are made to be used as Asynchronous calls, so when you execute your loop and for each iteration you creates a new promise, you are creating new instances, and each one of those can be executed in their own time.
But what this even means? The explanation is, when you create 10 new Promises in a loop, each promise will be executed in his own time and probablly will mess up with your promise solving order.
What you can do to solve it? You can use await
command to wait each promise to solve, like the code bellow:
for (let i = 0; i < 10; i++) {
let p = new Promise((resolve, reject) => {
let a = 1 + (i % 2)
if (a === 2) {
resolve(i + ' resolve ' + a)
} else {
reject(i + ' reject ' + a)
}
})
await p.then((message) => {
console.log(message)
}).catch((message) => {
console.log(message)
})
}
Or you could try use Promise.all()
which will basically solve the order for you, see the official docs here
1
well, you can remove the.then
if you're usingawait
– pushkin
yesterday
1
Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.
– Edwin
yesterday
add a comment |
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
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
answered yesterday
Esdras XavierEsdras Xavier
45017
45017
1
well, you can remove the.then
if you're usingawait
– pushkin
yesterday
1
Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.
– Edwin
yesterday
add a comment |
1
well, you can remove the.then
if you're usingawait
– pushkin
yesterday
1
Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.
– Edwin
yesterday
1
1
well, you can remove the
.then
if you're using await
– pushkin
yesterday
well, you can remove the
.then
if you're using await
– pushkin
yesterday
1
1
Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.
– Edwin
yesterday
Yes I could use async-await; and do prefer that. It's that I want to get to understand the promise.
– Edwin
yesterday
add a comment |
Because JavaScript are mono thread :
- promise
- eventListener
- setTimeout
- setInterval
previous listed method are not part of javascript enterpreter (V8 Engine for example), it delegate to the event loop which are part of browser or nodejs. more information here
Basically this code are delegate to 3th party (node, browser) which will decide himself when and on which order this collection of microtasks will be executed and return to the main thread.
is Why Following code :
let p = new Promise((resolve, reject) => {
resolve('micro task thread');
});
p.then((message) => {
console.log(message)
}).catch((message) => {
console.log(message)
});
console.log('main thread');
will print "main thread" then "micro task thread" but you don't have any obvious delayed code. Is because all main thread function call will be execute before doing task on eventLoop.
Most of the time, event loop will execute the collection as first come first rendered.
@Edwin i have not understand what you try to say. Ludovico post interesting answer. And my answer contain, i think, some tips to understand how async traitment work under the hood.
– Yanis-git
yesterday
Fair question. Yes you gave a good explanation of how the event loop works and how promise fits in there. Ludvico posted a solution that produced the expected result.That still did not explain to me enough why it was happening. The key to understanding this was at MDN saying: The catch() is calling Promise.prototype.then(undefined, onrejected). Then I looked at the description of then Promise.prototype.then(). Under the syntax header I found this.
– Edwin
21 hours ago
you can see much mind blown with following case : all case posted here :o
– Yanis-git
21 hours ago
add a comment |
Because JavaScript are mono thread :
- promise
- eventListener
- setTimeout
- setInterval
previous listed method are not part of javascript enterpreter (V8 Engine for example), it delegate to the event loop which are part of browser or nodejs. more information here
Basically this code are delegate to 3th party (node, browser) which will decide himself when and on which order this collection of microtasks will be executed and return to the main thread.
is Why Following code :
let p = new Promise((resolve, reject) => {
resolve('micro task thread');
});
p.then((message) => {
console.log(message)
}).catch((message) => {
console.log(message)
});
console.log('main thread');
will print "main thread" then "micro task thread" but you don't have any obvious delayed code. Is because all main thread function call will be execute before doing task on eventLoop.
Most of the time, event loop will execute the collection as first come first rendered.
@Edwin i have not understand what you try to say. Ludovico post interesting answer. And my answer contain, i think, some tips to understand how async traitment work under the hood.
– Yanis-git
yesterday
Fair question. Yes you gave a good explanation of how the event loop works and how promise fits in there. Ludvico posted a solution that produced the expected result.That still did not explain to me enough why it was happening. The key to understanding this was at MDN saying: The catch() is calling Promise.prototype.then(undefined, onrejected). Then I looked at the description of then Promise.prototype.then(). Under the syntax header I found this.
– Edwin
21 hours ago
you can see much mind blown with following case : all case posted here :o
– Yanis-git
21 hours ago
add a comment |
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.
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');
answered yesterday
Yanis-gitYanis-git
2,6271725
2,6271725
@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
yesterday
Fair question. Yes you gave a good explanation of how the event loop works and how promise fits in there. Ludvico posted a solution that produced the expected result.That still did not explain to me enough why it was happening. The key to understanding this was at MDN saying: The catch() is calling Promise.prototype.then(undefined, onrejected). Then I looked at the description of then Promise.prototype.then(). Under the syntax header I found this.
– Edwin
21 hours ago
you can see much mind blown with following case : all case posted here :o
– Yanis-git
21 hours ago
add a comment |
@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
yesterday
Fair question. Yes you gave a good explanation of how the event loop works and how promise fits in there. Ludvico posted a solution that produced the expected result.That still did not explain to me enough why it was happening. The key to understanding this was at MDN saying: The catch() is calling Promise.prototype.then(undefined, onrejected). Then I looked at the description of then Promise.prototype.then(). Under the syntax header I found this.
– Edwin
21 hours ago
you can see much mind blown with following case : all case posted here :o
– Yanis-git
21 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
yesterday
@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
yesterday
Fair question. Yes you gave a good explanation of how the event loop works and how promise fits in there. Ludvico posted a solution that produced the expected result.That still did not explain to me enough why it was happening. The key to understanding this was at MDN saying: The catch() is calling Promise.prototype.then(undefined, onrejected). Then I looked at the description of then Promise.prototype.then(). Under the syntax header I found this.
– Edwin
21 hours ago
Fair question. Yes you gave a good explanation of how the event loop works and how promise fits in there. Ludvico posted a solution that produced the expected result.That still did not explain to me enough why it was happening. The key to understanding this was at MDN saying: The catch() is calling Promise.prototype.then(undefined, onrejected). Then I looked at the description of then Promise.prototype.then(). Under the syntax header I found this.
– Edwin
21 hours ago
you can see much mind blown with following case : all case posted here :o
– Yanis-git
21 hours ago
you can see much mind blown with following case : all case posted here :o
– Yanis-git
21 hours ago
add a comment |
I did found a solution here:
MDN promise then
for (let i = 0; i < 10; i++) {
let p = new Promise((resolve, reject) => {
let a = 1 + (i % 2)
if (a === 2) {
resolve(i + ' resolve ' + a)
} else {
reject(i + ' reject ' + a)
}
})
p.then((message) => {
console.log(message)
}, failed => {
console.log(failed)
})
}
promise.catch() is calling promise.then(undefined, onreject). That is why resolve allways appeared first.
I will note that though this is absolutely valid, most developers will never wrote code like that (and some would probably be confused as to it's behavior).
– jhpratt
yesterday
add a comment |
I did found a solution here:
MDN promise then
for (let i = 0; i < 10; i++) {
let p = new Promise((resolve, reject) => {
let a = 1 + (i % 2)
if (a === 2) {
resolve(i + ' resolve ' + a)
} else {
reject(i + ' reject ' + a)
}
})
p.then((message) => {
console.log(message)
}, failed => {
console.log(failed)
})
}
promise.catch() is calling promise.then(undefined, onreject). That is why resolve allways appeared first.
I will note that though this is absolutely valid, most developers will never wrote code like that (and some would probably be confused as to it's behavior).
– jhpratt
yesterday
add a comment |
I did found a solution here:
MDN promise then
for (let i = 0; i < 10; i++) {
let p = new Promise((resolve, reject) => {
let a = 1 + (i % 2)
if (a === 2) {
resolve(i + ' resolve ' + a)
} else {
reject(i + ' reject ' + a)
}
})
p.then((message) => {
console.log(message)
}, failed => {
console.log(failed)
})
}
promise.catch() is calling promise.then(undefined, onreject). That is why resolve allways appeared first.
I did found a solution here:
MDN promise then
for (let i = 0; i < 10; i++) {
let p = new Promise((resolve, reject) => {
let a = 1 + (i % 2)
if (a === 2) {
resolve(i + ' resolve ' + a)
} else {
reject(i + ' reject ' + a)
}
})
p.then((message) => {
console.log(message)
}, failed => {
console.log(failed)
})
}
promise.catch() is calling promise.then(undefined, onreject). That is why resolve allways appeared first.
edited 21 hours ago
answered yesterday
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
yesterday
add a comment |
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
yesterday
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
yesterday
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
yesterday
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
3
You are creating new promise on every iteration
– brk
yesterday
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
yesterday
2
Yes Junvar. That is my question.
– Edwin
yesterday
5
99% sure it's because the
.then
and.catch
each take a tick on the event loop. So the rejections are all a single tick behind your resolves.– jhpratt
yesterday
1
I'd add that 1% to that.
– Michał Kapracki
yesterday