CODEWITHSUNDEEP
javascripterror-handlingpromise
mhucka
mhucka

Reputation: 2399

With Javascript Promises, are there best practices regarding the use of "error" versus catch clauses?

In learning to write in JavaScript with Promises, I'm encountering two different ways of dealing with errors. One is to use a catch, as in this example:

axios.post('/someapi', {
  somedata1: 'foo'
})
.then((result) => {
  console.log(result);
})
.catch((exception) => {
  console.log(exception);
});

The other is to have a clause in the then for the rejected case:

axios.post('/someapi', {
  somedata1: 'foo',
})
.then((response) => {
  console.log(response);
}, (error) => {
  console.log(error);
});

Some authors seem to use one approach, other authors use the other, and it's not clear to me why. Are there situations in which it's necessary or desirable to use one or the other?

(The example above uses axios, but that's just for the purposes of providing a code example. This question is not about axios.)

Upvotes: 0

Views: 78

Answers (2)

jfriend00
jfriend00

Reputation: 707218

With Javascript Promises, are there best practices regarding the use of “error” versus catch clauses?

There is no universal "best practice" for that question because it depends upon what specific behavior you want your code to have. As others have mentioned, you get a different behavior in a few ways.

Some authors seem to use one approach, other authors use the other, and it's not clear to me why. Are there situations in which it's necessary or desirable to use one or the other?

Yes, there are situations to use one or the other. They provide potentially different behaviors. Only if you're 200% sure that your successHandler in .then(successHandler) can never throw or return a rejected promise, would there be no meaningful difference.

As a summary:

When using p.then(successHandler).catch(errorHandler), errorHandler will get errors that occur either from a rejected p or from an error or rejection from the successHandler.

When using p.then(successHandler, errorHandler), errorHandler will be called from a rejection of p and will NOT get called from an error or rejection from the successHandler.

Different behaviors that are useful for different circumstances.

In this .catch() example below, the .catch() will catch an error that occurs (either accidentally from a coding error, a thrown exception or when returning some other promise that rejects).

Promise.resolve("hello").then(greeting => {
    console.log("throwing error");
    throw new Error("My .then() handler had an error");
}).catch(err => {
    // will get here
    console.log("Caught error in .catch()\nError was: ", err.message);
});

But, when using the second argument to .then(), that error from the .then() handler will not be caught:

Promise.resolve("hello").then(greeting => {
    console.log("throwing error");
    throw new Error("My .then() handler had an error");
}, err => {
    // won't get here
    console.log("Caught error in .catch()\nError was: ", err.message);
});

So, sometimes you want an error that might occur in the .then() handler to hit this immediate error handler and sometimes you don't want it to hit that error handler because you want that error handler to only process errors from the original promise and you have some other catch handler later in the promise chain that will deal with this error.

Recommendation

In general, I would advise that you start out with the .catch() handler because it catches more errors and does not require that there be some other .catch() handler elsewhere in the promise chain in order to be safe. Then, you switch to the .then(successHandler, errorHandler) form if you explicitly don't want this errorHandlerto be called if there's another error in the successHandler AND you have somewhere else in the promise chain where an error in the successHandler would get caught or handled.

Upvotes: 1

Vivek Patel
Vivek Patel

Reputation: 1057

Both the syntaxes work out of the box. But the first one has an advantage that the Catch block is able to catch an error thrown by the Promise Rejection as well as an error thrown by then block.

Here is the Example you can try in Node and you will have a better idea about it.

function x () {
  return new Promise((resolve, reject) => {
    return resolve('Done...');
  });
}

x()
  .then(response => {
    console.log('RESPONSE---', response)
    throw 'Oops...Error occurred...';
  })
  .catch(error => console.log('ERROR---', error));

x()
  .then(
    response => {
      console.log('RESPONSE---', response)
      throw 'Oops...Error occurred...';
    },
    error => console.log('ERROR---', error)
  );

Upvotes: 0

Related Questions