CODEWITHSUNDEEP
javascriptreactjspromiseaxios
Igor-Vuk
Igor-Vuk

Reputation: 3797

axios doesn't return response and error separately

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
  })

Upvotes: 2

Views: 2323

Answers (3)

Javier Mendoza
Javier Mendoza

Reputation: 17

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

Upvotes: 0

Abishek Aditya
Abishek Aditya

Reputation: 812

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

Upvotes: 0

Matti Price
Matti Price

Reputation: 3551

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.

Upvotes: 5

Related Questions