axios 不会分别返回响应和错误答案

【问题标题】：axios doesn't return response and error separatelyaxios 不会分别返回响应和错误
【发布时间】：2020-01-27 04:36:06
【问题描述】：

我有一个 React 组件。在该组件内部，我有一个 onFormSubmit 函数，它从另一个组件调用函数。这个其他功能正在使用 axios 发出 POST 请求。如果 POST 请求为真，我想返回对第一个函数的响应，否则返回错误。现在发生的事情是我的“SUCCESS RESPONSE”console.log 总是被触发，即使在 axios POST 请求中也有错误。如果出现错误，则应触发“错误响应”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
  })

【问题讨论】：

“即使在 axios POST 请求中也有错误”你到底是什么意思？你怎么知道这是一个错误？响应码？
如果 axios POST 请求中有错误，则触发“错误作业描述”console.log，如果成功则触发“成功”console.log。这工作正常。我只需要它在调用它的第一个函数中以相同的方式触发。错误分开，成功分开

标签： javascript reactjs promise axios

【解决方案1】：

调用return表示成功，调用方法中的.catch函数不会被触发。不要返回error.response.data.developerMessage，而是使用throw。这将导致它被抛出，然后被调用函数中的.catch 方法捕获。

不过，根据具体情况，通常不建议捕获和重新抛出这样的异常，因为您会丢失堆栈跟踪等。您最好不要在较低的方法中捕获错误，而仅依靠调用方法来处理错误。

【讨论】：

【解决方案2】：

在

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

用throw error替换return语句

【讨论】：

【解决方案3】：

不要在你的第二个组件上使用 catch 和 catch。

为了可以使用 then 并捕获您的第一个组件，您需要返回 axios，例如：

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

希望能帮到你

【讨论】：