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
7 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
|
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 19 mins ago
Boann
37.5k1291123
37.5k1291123
asked 7 hours ago
EdwinEdwin
614
614
3
You are creating new promise on every iteration
– brk
7 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
|
show 1 more comment
3
You are creating new promise on every iteration
– brk
7 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
7 hours ago
You are creating new promise on every iteration
– brk
7 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
|
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
5 hours ago
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
6 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
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
5 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)
})
}
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
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
5 hours ago
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
5 hours ago
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 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
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
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
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
6 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
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
6 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
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 6 hours ago
Esdras XavierEsdras Xavier
45017
45017
1
well, you can remove the.then
if you're usingawait
– pushkin
6 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
add a comment |
1
well, you can remove the.then
if you're usingawait
– pushkin
6 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
6 hours ago
well, you can remove the
.then
if you're using await
– pushkin
6 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
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
5 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
5 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 6 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
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
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
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)
})
}
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
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)
})
}
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
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)
})
}
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)
})
}
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
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
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
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
7 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