axios doesn't return response and error separately

2
votes

I have a React component. Inside that component I have a function onFormSubmit that calls function from another component. This other function is making POST request with axios. I would like to return if POST request is true a response into first function or error if not. What is happening now is that my 'SUCCESS RESPONSE' console.log is always triggered, even then there is an error in axios POST request. If there is an error then just 'ERROR RESPONSE' console.log should be triggered.

From first component

 onFormSubmit = () => {
    postJobDescriptionQuickApply(this.state, this.props.jobDescription.id)
      .then((response) => {
        console.log('SUCCESS RESPONSE', response)
      })
      .catch((error) => {
        console.log('ERROR RESPONSE', error)
      })
  }

From second component

export const postJobDescriptionQuickApply = (easyApplyData, jobId) => apiUrl('easyApply', 'easyApply').then(url => axios
  .post(url, {
    applicant: {
      email: easyApplyData.email,
      fullName: `${easyApplyData.firstName} ${easyApplyData.lastName}`,
      phoneNumber: easyApplyData.phoneNumber,
      resume: easyApplyData.resume,
      source: easyApplyData.source,
    },
    job: {
      jobId,
    },
  })
  .then((response) => {
    console.log('SUCCESS', response.data.developerMessage)
    return response.data.developerMessage
  })
  .catch((error) => {
    // handle error
    console.log('ERROR JOB DESCRIPTION', error.response.data.developerMessage)
    return error.response.data.developerMessage
  })
3
javascriptreactjspromiseaxios
"even then there is an error in axios POST request" what exactly do you mean by that? How do you know it's an error or not? Response code? – Matti Price
If there is an error in axios POST request then "ERROR JOB DESCRIPTION" console.log is triggered and if it's succers then 'SUCCESS' console.log is triggered. This works fine. I just need it to triggered the same way back in first function that called it. Seaprate for error and separate for success – Igor-Vuk

3 Answers

5
votes

calling return indicates success, and the .catch function in the calling method wouldn't be triggered. Instead of returning error.response.data.developerMessage use throw instead. This will cause it to be thrown and then caught with the .catch method in the calling function.

Depending on the situation though, it's generally not advisable to catch and rethrow exceptions like that because you lose stack trace etc. You may be better off not catching the error in the lower method and just relying on the calling method to handle the error.

0
votes

In the

 .catch((error) => {
   // handle error
   console.log('ERROR JOB DESCRIPTION', error.response.data.developerMessage)
   return error.response.data.developerMessage
 })

replace return statement with throw error

0
votes

Not use catch and catch on your second component.

To can use then and catch on your first component you need return axios, something as: 

export const postJobDescriptionQuickApply = (easyApplyData, jobId, url) => axios
  .post(url, {
    applicant: {
      email: easyApplyData.email,
      ...
    },
    job: {
      jobId,
    },
  });

// or using apiUrl

export const postJobDescriptionQuickApply = (easyApplyData, jobId) => apiUrl('easyApply', 'easyApply')
 .then(url => axios.post(url, {
    applicant: {
      email: easyApplyData.email,
      fullName: `${easyApplyData.firstName} ${easyApplyData.lastName}`,
      phoneNumber: easyApplyData.phoneNumber,
      resume: easyApplyData.resume,
      source: easyApplyData.source,
    },
    job: {
      jobId,
    },
  });

Additionally, do not forget to validate the response status in the first component, something as:

onFormSubmit = () => {
    postJobDescriptionQuickApply(this.state, this.props.jobDescription.id)
      .then((response) => {
          if (response.status === 200) {
             console.log('SUCCESS RESPONSE', response);
          }

      })
      .catch((error) => {
        console.log('ERROR RESPONSE', error)
      })
  }

I hope, I could help you