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

Posted 2023-03-04

【中文标题】axios 不会分别返回响应和错误

【英文标题】：axios doesn't return response and error separately

【发布时间】：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。这工作正常。我只需要它在调用它的第一个函数中以相同的方式触发。错误分开，成功分开

【参考方案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)
      )
  

希望能帮到你