Javascript promise chaining not working as expected. After going inside catch block it is still throwing error

But after the catch statement it is throwing error again for 3rd promise.

This happens because the second then-callback does not execute (as that would only happen when promise2 fulfills), and by consequence, promise3 is not made part of the promise chain and thus its rejection remains uncaught.

It is not a common pattern to first create a promise (like promise3) and only later use such a promise as a return value inside a then-callback. Usually you would only create the promise when the relevant then-callback is executed. If you would have done it that way, there would not have been this problem, as you can see here:

var promise1 = new Promise((resolve, reject) => resolve("1st resolved"));

// promise chaining
promise1
  .then((res) => {
    console.log("promise1 resolved:", res);
    var promise2 = new Promise((resolve, reject) => reject("2nd rejected")); // <---
    return promise2;
  })
  .then((res) => {
    console.log("promise2 resolved:", res);
    var promise3 = new Promise((resolve, reject) => reject("3rd rejected")); // <---
    return promise3;
  })
  .then((res) => {
    console.log("promise3 resolved:", res);
    console.log(res);
  })
  .catch((err) => console.log("error in promise:", err));

If on the other hand, you really want to create all three promises, no matter what happens to them, and your goal is to get into the final then-callback when they all have resolved, or into a common handler when at least one of them is rejected, then use Promise.all:

var promise1 = new Promise((resolve, reject) => resolve("1st resolved"));
var promise2 = new Promise((resolve, reject) => reject("2nd rejected"));
var promise3 = new Promise((resolve, reject) => reject("3rd rejected"));

Promise.all([
    promise1.then((res) => {
        console.log("promise1 resolved:", res);
        return res;
    }), 
    promise2.then((res) => {
        console.log("promise2 resolved:", res);
        return res;
    }),
    promise3.then((res) => {
        console.log("promise3 resolved:", res);
        return res;
    }),
]).then(
    (res) => console.log("success. results are:", res),
    (err) => console.log("error in a promise:", err)
);

In this implementation, there are the following points to highlight:

• The promises are no longer chained (note how the return statements in the callbacks changed). This chaining is not necessary, because they were already created, and the ultimate goal of your chaining was only to know when all three had resolved (or any had rejected). You don’t need chaining for that, but Promise.all.

• Promise.all will detect when one of the promises rejected (in this case it detects the rejection of promise2 first), and will absorb the rejection of any of the other promises that might also reject — in this case the rejection of promise3.

• The promise that Promise.all returns will either fulfill or reject, and so I have provided a handler for both cases by providing two callbacks to that final then.

Difference

The above two snippets output the same result. The difference is that in the first case promise3 is not created (considering it only makes sense to do so when promise2 fulfills), while in the second case it is.

Choose the pattern you need for your case.