Proper Method for Error Handling in Nested Promises?

Question

What is the proper way to handle errors from nested promises?

Setup

new Promise((resolve, reject) => {
  // literally anything
  httpCommonServiceAPI
    .getDataWithoutParams(url)
    .then((response) => resolve(response.data))
    .catch((error) => reject(error))
});

httpCommonServiceAPI.getDataWithoutParams = (url) => 
  new Promise((resolve, reject) => 
    Axios.get(url)
         .then((response) => resolve(response.data))
         .catch((error) => reject(error));

I know if I replace the second promise with a try/catch block I can just call throw error but I am trying to accomplish this with nested promises. Currently, it just passes the error in the lower promise catch handler to the response of the first promise and does not treat the lower error as an actual error in the outer promise.

Note: Going off what Codebling said about the unclear behavior. The first block and the second are in 2 different files and are loaded in before they are called so both are accessible. Secondly, the first promise at the top is doing stuff and then it calls a method that is a promise and it wants to handle the errors if any. In the method getDataWithoutParams() we have it as a promise that is making an Axios request.

Note 2: Some have said that the Axios request itself is a promise, I am aware. But what I am asking is when the Axios request sends back an error we can capture that with the .catch but if this Axios call is inside a Promise already then how do we send that caught error to the catch of the upper Promise?

Answer 1

Don't wrap Promises

The whole point (or one of them, anyway) of promises is that they don't need to be nested (and shouldn't be).

httpCommonServiceAPI.getDataWithoutParams = (url) => 
  new Promise((resolve, reject) =>                   //*** unnecessary wrapping 
    Axios.get(url)
         .then((response) => resolve(response.data)) //*** unnecessary wrapping
         .catch((error) => reject(error));           //*** unnecessary wrapping

A Promise has 2 "states" and a few substates:

• Unsettled (we don't know the outcome yet/operation not complete)
• Settled (we know the outcome)
  • Rejected (failed)
  • Resolved (success)
    • a value was returned
• [Nested] The Promise was resolved with a Promise. In this case, the state of the current Promise is set to the returned Promise <-- this is what you want

So just return the Promise:

httpCommonServiceAPI.getDataWithoutParams = (url) => 
    Axios.get(url)

or, to just return .data,

httpCommonServiceAPI.getDataWithoutParams = (url) => 
    Axios.get(url)
         .then(response => response.data)

or, as an async:

httpCommonServiceAPI.getDataWithoutParams = async (url) => {
    const response = await Axios.get(url);
    return response.data;
}

All 3 of these examples return Promises.

Putting it together

Using .then .catch

httpCommonServiceAPI.getDataWithoutParams = (url) => 
  Axios.get(url)
       .then(response => response.data)

httpCommonServiceAPI
  .getDataWithoutParams(url)
  .then(responseData => doSomethingWithResponseData(responseData))
  .catch(axiosError => handleFailure(axiosError)) //Axios errors will be returned here

We should not be surprised that this works, since httpCommonServiceAPI.getDataWithoutParams is returning a Promise. If we take the returned object and apply the other calls to it, it would look like this:

Axios.get(url)
  .then(response => response.data)
  .then(responseData => doSomethingWithResponseData(responseData))
  .catch(axiosError => handleFailure(axiosError))  

It should be clear that Axios errors will "bubble up" here.

Using async:

httpCommonServiceAPI.getDataWithoutParams = async (url) => {
    const response = await Axios.get(url);
    return response.data;
}

try {
  const responseData = httpCommonServiceAPI
    .getDataWithoutParams(url);
} catch(axiosError) {
  handleFailure(axiosError); //Axios errors will be returned here
}