Is Promise.then(a, b) the same as Promise.then(a).catch(b)?

Question

What are the differences between

• myPromise.then(a, b)

• myPromise.then(a).catch(b)

?

Do the two JavaScript expressions always yield the same result, regardless of the content and state of myPromise and implementations of functions a and b?

Is there any situation where I should prefer using one over the other, other than code readability?

Answer 1

It is recommended to use catch(), Because when we use a myPromise.then(a, b), in a promise chain, Then next then block will always execute even if the promise is rejected. This is because the promise chains think that we have cleaned up the error in our error handler. Look at the example below: Even when we reject() the next then block executes.

function asyncFun(a,b){
  return new Promise((resolve, reject)=>{
      if(typeof a ==="number" && typeof b === "number")
        resolve(a + b);
      else
        reject("invalid data!!");
  });
}
asyncFun(2,'4').then((response)=>{
  console.log(response);
  return response;
}, (error)=>{
  console.log(error);
}).then((response)=>{
  console.log("console 2",response)
}, (error)=>{
  console.log(error);
});

While this will not happen if we use only a single error handler catch() at the end of the promise chain: please note As pointed out by Bergi that the above scenario will be reproduced even in case of mutiple catch().

function asyncFun(a,b){
  return new Promise((resolve, reject)=>{
      if(typeof a ==="number" && typeof b === "number")
        resolve(a + b);
      else
        reject("invalid data!!");
  });
}
asyncFun(2,'4').then((response)=>{
  console.log(response);
  return response;
}).then((response)=>{
  console.log("console 2",response)
}).catch((err)=> console.log(err));

Answer 2

These are different in the way they handle errors in the then() callback, which in some cases can be a significant enough difference that most people recommend only using catch().

For example with catch(), you can catch this error:

Promise.resolve('test')
.then(r => {
  throw("whoops")
})
.catch(e => console.log("caught error:", e))

Using the then(a,b) style you can't:

Promise.resolve('test')
.then(r => { throw("whoops")},
      e => console.log("caught error?", e))
// unhandled rejection (you'll need to look in the console)

Other than some testing scenarios, it's hard to think of a use case where this behavior would be preferred.

You can use both, which will catch rejections and errors in the then() callback, but this makes things more confusing than you probably need unless you have a special use case for distinguishing between these two kinds of errors. For example which handler handles which errors:

Promise.reject("rejected")
.then(r => {throw("whoops")}, 
     e => console.log("Promise 1: caught error in second function:", e))
.catch(e=> console.log("Promise 1: caught error in catch", e))

Promise.resolve("rejected")
.then(r => {throw("whoops")}, 
     e => console.log("Promise 2: caught error in second function:", e))
.catch(e=> console.log("Promise 2: caught error in catch", e))

Answer 3

The 2 ways are the same, I think. However, I prefer using async().then().catch() because It will be easier to read.

Moreover, In case you want to call some async functions one by one, but need to break immediately (don't want the following function continue running) if some error throw. You need to put only 1 catch at the final. In this case, we can't use the first style.

asyncA()
    .then((val) => asyncB(val))
    .then((val) => asyncC(val))
    .then((val) => asyncD(val))
    .catch(() => { /* any of asyncA, asyncB, asyncC, asyncD will goes directly here if throwing error })

in the example above. You can see, any of the function async fails, the program will skip the following functions and goes directly to catch.