javascript - 在不停止应用程序的情况下拦截 400 Bad Request

Question

我一直在尝试在 React 中创建一个登录表单。在这种形式中，我向 api 提交了一个 post 请求，然后 api 相应地发送了一个响应。但是，在 api 中，无效表单返回 400 状态，向控制台记录错误，使我无法处理无效表单。在我的代码中，我尝试使用 catch 方法拦截此错误，以便我可以进行必要的处理。

相关代码如下:

class LoginModal extends Component {

  state = {
    email: "",
    password: ""
  }

  handleEmailChange = async event => {
    await this.setState({ email: event.target.value, });
  }
  handlePasswordChange = async event => {
    await this.setState({ password: event.target.value, });
  }

  redirect = path => {
    this.props.history.push(path);
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      email: this.state.email,
      password: this.state.password
    };

    api.post(`${api.url}/users/authenticate`, user)
      .then(res => {
          console.log("Succesful login.");
          this.redirect("/dashboard");
      })
      .catch(err => {
          console.log(err);
      })

  }

  render() {
    return (
      //*Render Code*
    );
  }
}

在此先感谢您提供的任何帮助。

Answer 1

我认为您将 console.log(err) 的输出误解为破坏您的应用程序的异常。尝试记录 err.response 而不是 err 并检查您是否可以使用该数据验证请求。