axios не возвращает ответ и ошибку отдельно

Question

У меня есть компонент React.Внутри этого компонента у меня есть функция onFormSubmit, которая вызывает функцию из другого компонента.Эта другая функция делает запрос POST с помощью axios.Я хотел бы вернуть, если запрос POST равен true, ответ на первую функцию или ошибку, если нет.Что происходит сейчас, так это то, что мой console.log «SUCCESS RESPONSE» всегда запускается, даже тогда в Axios POST-запросе возникает ошибка.Если есть ошибка, то должен быть запущен только файл 'ERROR RESPONSE' console.log.

От первого компонента

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

От второго компонента

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

Answer 1

вызов return указывает на успех, и функция .catch в вызывающем методе не будет запущена.Вместо возврата error.response.data.developerMessage используйте взамен throw.Это приведет к тому, что он будет сгенерирован, а затем перехвачен методом .catch в вызывающей функции.

В зависимости от ситуации, как правило, нежелательно перехватывать и перебрасывать подобные исключения, поскольку вы теряете трассировку стека и т. Д.Возможно, лучше не перехватывать ошибку в нижнем методе, а просто полагаться на вызывающий метод для обработки ошибки.

Answer 2

В

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

заменить оператор возврата на throw error

Answer 3

Не используйте catch и catch для вашего второго компонента.

Чтобы использовать затем и catch для вашего первого компонента, вам нужны обратные оси, что-то вроде:

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

Кроме того, не забудьте проверить статус ответа в первом компоненте, например:

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

Надеюсь, я мог бы помочь вам