Why does javascript ES6 Promises continue execution after a resolve?
JavascriptPromiseEcmascript 6Es6 PromiseJavascript Problem Overview
As I understand a promise is something that can resolve() or reject() but I was suprised to find out that code in the promise continues to execute after a resolve or reject is called.
I considered resolve or reject being an async-friendly version of exit
Can someone explain the thought behind why the following example sometimes shows the console.log after a resolve call:
var call = function() {
return new Promise(function(resolve, reject) {
resolve();
console.log("Doing more stuff, should not be visible after a resolve!");
});
};
call().then(function() {
console.log("resolved");
});
Javascript Solutions
Solution 1 - Javascript
JavaScript has the concept of "run to completion". Unless an error is thrown, a function is executed until a return
statement or its end is reached. Other code outside of the function can't interfere with that (unless, again, an error is thrown).
If you want resolve()
to exit your initializer function, you have to prepend it by return
:
return new Promise(function(resolve, reject) {
return resolve();
console.log("Not doing more stuff after a return statement");
});
Solution 2 - Javascript
The callbacks that will be invoked when you resolve
a promise are still required by the specification to be called asynchronously. This is to ensure consistent behaviour when using promises for a mix of synchronous and asynchronous actions.
Therefore when you invoke resolve
the callback is queued, and function execution continues immediately with any code following the resolve()
call.
Only once the JS event loop is given back control can the callback be removed from the queue and actually invoked.
Solution 3 - Javascript
The resolve()
function is not like return
at all. It simply indicates that the argument of the callback function which was registered with then()
method, is now ready and the callback function can potentially leave the Job queue (or the Micro task queue) and enter the main JS call stack, but that only happens when all synchronous codes and the asynchronous codes that entered the queue before this one finished running. console.log("Not doing more stuff after a return statement");
this statement in your code is a synchronous code, and it has priority over the asynchronous codes. That's why it runs first