Why do both Promise's then & catch callbacks get called?
The then
callback gets called because the catch
callback is before it, not after. The rejection has already been handled by catch
. If you change the the order (i.e. (promise.then(...).catch(...)
)), the then
callback won't be executed.
MDN says that the .catch()
method "returns a new promise resolving to the return value of the callback". Your catch callback doesn't return anything, so the promise is resolved with undefined
value.
Could anyone explain why success is logged?
In short: a .then
following a .catch
in a Promise
chain will always be executed (unless it itself contains errors).
The theoretical explanation
Your code is actually just a Promise
chain which is first executed synchronously setting it up to complete asynchronously afterwards. The Javascript engine will pass on any reject()
or Error
to the first .then
down the chain with a reject
callback in it. The reject callback is the second function passed to a .then
:
.then(
function (){
//handle success
},
function () {
//handle reject() and Error
})
The use of .catch
is just syntactic suger for:
.then(null, function () {
//handle reject() or Error
})
Each of the .then
's automatically returns a new Promise
which can be acted upon by subsequent .then
's (or .catch
's which are also .then
's).
Visualizing the flow of your promise chain
You can visualize the flow of your code with the following example:
var step1 = new Promise (function (resolve, reject) {
setTimeout(reject('error in step1'), 1000);
})
var step2 = step1.then(null, function () {
// do some error handling
return 'done handling errors'
})
var step3 = step2.then(function () {
// do some other stuff after error handling
return 'done doing other stuff'
}, null)
setTimeout (function () {
console.log ('step1: ', step1);
console.log ('step2: ', step2);
console.log ('step3: ', step3);
console.log();
console.log ('Asynchronous code completed')
console.log();
}, 2000);
console.log ('step1: ', step1);
console.log ('step2: ', step2);
console.log ('step3: ', step3);
console.log();
console.log ('Synchronous code completed')
console.log();
which at runtime will result in the following output in the console:
step1: Promise { <rejected> 'error in step1' }
step2: Promise { <pending> }
step3: Promise { <pending> }
Synchronous code completed
step1: Promise { <rejected> 'error in step1' }
step2: Promise { 'done handling errors' }
step3: Promise { 'done doing other stuff' }
Asynchronous code completed
For those who had a successfully resolved promise and a chain ordered like .then
> .catch
, but still had both your then
and catch
called, it may be because your then
had an error-throwing bug that you can't see unless you explicitly console the error in your catch
. That's one of my pet-peeves with Promises absorbing errors even in strict mode.
const promise = new Promise(resolve => resolve())
.then(() => {
console.log('then');
not.defined = 'This causes the catch to fire even though the original promise resolved successfully.';
})
.catch((e) => {
console.log('catch');
// console.error(e);
});