Imagine a function that returns a promise (for example fetch from fetch API):
fetch(...)
.then((response) => {...})
.catch((error) => {...});
How can I know if the error inside the catch statement has been originated due to a promise rejection instead from the code inside the then statement?
Something like the following will work:
let success = false;
fetch(...)
.then((response) => {success = true; ...})
.catch((error) => {if(success) ...});
But I want to know if there is a better or more native way to do it. I have also tried to do something like:
fetch(...)
.catch((promiseError) => {...});
.then((response) => {...})
.catch((thenError) => {...});
But I think it doesn't work because response isn't forwarded to the thenstatement (or at least that's what TS says).
Which would be the better way?
then accepts two parameters¹: A function to call on fulfillment, and another to call on rejection. So you can handle the initial rejection earlier:
fetch(/*...*/)
.then(
// Fulfillment handler
(response) => {
/*...*/
},
// Rejection handler for `fetch` promise
(error) => {
/*...*/
}
)
.catch((error) => {
// This rejection handler only sees errors not handled above
});
The first rejection handler (in the then call) is only called for rejections of the promise from fetch, not rejections caused by errors in the fulfillment handler.
The second rejection handler (in the catch call) is called for rejections caused by errors (or rejected promises) from the handlers that come before it (either fulfillment or rejection); it doesn't get called if the original promise is rejected (but it may well get called if the first rejection handler throws an error or returns a promise that is/will be rejected).
So in those cases where you care, you can handle it closer to the source.
Note that all rejection handlers that don't either throw an error or return a promise that is/will be rejected convert rejection (of the original promise) into fulfillment (of the one from then/catch). That can matter for downstream then handlers.
A key thing to understanding this is to remember that then (and its wrappers catch and finally) return a new promise. That's why:
aPromise.then(onFulfilled).catch(onRejected);
is different from
aPromise.then(onFulfilled, onRejected);
The first one hooks up a fulfillment handler to aPromise, and then hooks up a rejection handler to the promise then returns (which means the rejection handler will be called if aPromise rejects or if the fulfillment handler throws an error or returns a promise that rejects). In contrast, the second one only hooks up handlers on aPromise, so errors/rejections from the fulfillment handler do not trigger the rejection handler.
¹ In fact, .catch(fn) is just a wrapper for .then(undefined, fn). :-) spec link
if the function pass to then returns a promise,
promise
.then(
(async (response)=>{
...
}).catch((errorFromThen) => {})
).catch((errorFromPromise) => {})
or just simply
promise
.then(
(response)=>{
try {
...
} catch (errorFromThen) {
...
}
}
).catch((errorFromPromise) => {})