If you have a promise inside a promise, do you need two catch?

Question

For example, making two calls with fetch() (second one inside the .then()), do you need two .catch() or only the outside one is enough?

I have tried to replicate but couldn't so far.

b = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Solving...');
    resolve('solved');
  }, 3000);
})
  .then(() => {
    new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('Rejecting...');
        reject('error');
      }, 1000);
    })
      .then(() => null)
      .catch((error) => {
        console.log('Catching error inside.');
        console.log(error);
      });
  })
  .catch((error) => {
    console.log('Catching error outside.');
    console.log(error);
  });

This works, but if I remove the inner catch() I get Unhandled promise rejection error

Solving...
Rejecting...
(node:73650) UnhandledPromiseRejectionWarning: error
(node:73650) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:73650) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Because you're not returning the promise in the first `then` block, attaching a `.catch` to it is correct. If you did return the promise then the outer `.catch` would handle it. — joshwilsonvu, May 13 '20 at 21:02

score 0 · Answer 1 · answered May 13 '20 at 21:00

0

No need to multiple catch(). if any error detected then goes to catch()

answered May 13 '20 at 21:00

Shuvro

222
3
7

chiragrtr · Accepted Answer · 2020-05-13T21:11:44.680

0

You need to return the promise in then blocks to be able to catch them in one chain:

b = new Promise((resolve, reject) => {
     setTimeout(() => {
       console.log('Solving...');
       resolve('solved');
     }, 3000);
  })
  .then(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('Rejecting...');
        reject('error');
      }, 1000);
    });
  })
  .then(() => null)      // You can get rid of this if you don't have anything to do here
  .catch((error) => {
    console.log('Catching error outside.');
    console.log(error);
  });

This should also be the preferred way. Having nested chaining as you have in your code sample will make the code very hard to read.

edited May 13 '20 at 21:11

answered May 13 '20 at 21:05

chiragrtr

902
4
6

Sorry, I was trying to mimic `fetch('url', settings).then(response => response.json()).then(data => fetch('url/'+data.id))...` so in this case I am not returning anything, just doing something when the fetch with data I need is solved – JorgeeFG May 13 '20 at 21:19
You are returning promise (`data => fetch()` returns a promise) here as well. With arrow functions, you don't have to explicitly type `return` as that's implicit: https://stackoverflow.com/questions/28889450/when-should-i-use-return-in-es6-arrow-functions – chiragrtr May 13 '20 at 21:22
So, in my example, you can get rid of the braces and the `return`, and simply say `.then(() => new Promise(..)).catch(...)` – chiragrtr May 13 '20 at 21:30
Yes sorry, I oversimplified it but I had a body there. I made a test putting bad url in the inner one and indeed unhandled promise came up – JorgeeFG May 13 '20 at 21:31
Glad I could help :) – chiragrtr May 13 '20 at 21:32

If you have a promise inside a promise, do you need two catch?

2 Answers2