axios catch 不捕获错误

Question

我正在使用axios 0.17.0以下代码：

this.props.userSignupRequest(this.state)
  .then( res => { console.log(res.data) } )
  .catch( err => { this.setState({ errors: err.response }) } )

并且服务器设置为400在用户注册验证未通过时返回 a 。这也显示在 console: 中POST 400 (Bad Request)，但setState没有被执行。这是为什么？我也试过了console.log(err)，一无所获。

Answer 1

就我而言（axios 0.27.2），400 响应确实被 axios 处理为错误。

此问题可能是由于响应拦截器编写不当而导致的，该拦截器在未处理的情况下不会返回 Promise.reject。

axios.interceptors.response.use(
    (response) => response,
    (error) => {
      if (condition) {
        // Handle error
      } else {
        // This is important, so that unhandled cases make axios throw errors
        return Promise.reject(error);
      }
    }
  );

Answer 2

POST 400 (Bad Request)不是错误，而是不成功的响应。catch当请求出错时触发。

如果您想捕获400或类似的 HTTP 错误，您需要检查status

例子

this.props.userSignupRequest(this.state)
  .then( res => { console.log(res.status) } )
  .catch( err => { this.setState({ errors: err.response }) } )

Answer 3

可能存在一些问题，我们可能需要查看更多代码才能确定。

axios 0.17.0 会在 400 响应状态上抛出错误。下面的演示展示了这一点。

意外行为可能是由于 的异步行为造成的setState()。如果您在拨打电话后立即尝试进入console.log状态，setState()那是行不通的。您需要使用setState回调。

const signinRequest = () => {
  return axios.post('https://httpbin.org/status/400');
}   
  
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      errors: null
    }
  }
  
  handleSignin = () => {
    this.props.userSigninRequest()
      .then(result => {
        console.log(result.status);
      })
      .catch(error => {
        this.setState({
          errors: error.response.status
        }, () => {
          console.error(this.state.errors);
        });
      });
  }
  
  render() {
    return (
      <div>
         <button onClick={this.handleSignin}>Signin</button>
        {this.state.errors}
      </div>
    )
  }
}

ReactDOM.render(<App userSigninRequest={signinRequest} />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.js"></script>

<div id="app"></div>