反应获取错误/响应捕获不起作用

Question

我建立了一个注册页面，该页面需要检查输入的电子邮件是否已被占用。 当收到重复的电子邮件时，它会在 java spring api 后端停止并返回“400”状态。

（我也尝试过使用 spring 注释 @column(unique=true)，但也无法捕获 422 错误。）

然后我对该状态有一个捕获，然后应该设置一个错误（存在一个字段）；设置任何错误时，页面将不会继续。如果没有错误，页面会自动登录并重新路由到主页。

我尝试将错误捕获为错误、错误状态、错误响应和响应。 （因为从技术上讲，从后端接收到的异常并不是错误。）我似乎无法捕捉到它。

如果有人知道这里出了什么问题以及如何解决它，我将不胜感激。

注册代码，我将在其中留下我尝试捕获响应的各种方法：

const signUp = () => {
    axios
      .post('http://localhost:8080/signup', {
        email,
        password,
        firstName,
        lastName
        // address,
        // phoneNumber,
        // image
      })
      // eslint-disable-next-line consistent-return
      .catch((err) => {
        if (err.status) {
          setEmailUsedError('Already in use. ');
        }
      })
      .then(() => {
        post('/login', null, {
          email,
          password
        }).then((data) => {
          if ('token' in data) {
            sessionStorage.token = data.token;
            const { sub } = JSON.parse(atob(data.token.split('.')[1]));
            sessionStorage.email = sub;
            onLogin();
            history.push('/');
          }
        })
          .catch((err) => {
            if (err.res.status === 422) {
              setEmailError('Already in use. ');
            } else setServerError(true);
          });
      });
  };

然后是浏览器中未捕获的错误消息：

更新：我将 .then((res)... 更改为 `.catch

      .then((res) => {
        if (res.status) {
          setEmailUsedError('Already in use. ');
        }

在signUp 函数中到.catch((err)...

现在它显示错误已被捕获，但并未按照编码设置错误。不知道为什么。

我尝试.catch((res)...时的结果相同

Answer 1

虽然可能还有其他因素在起作用，但根据控制台消息，返回 422 的是您对/signup 端点的调用，而不是/login（如代码示例所示）。您可能希望检查调用它的封闭块本身是否与 catch 语句链接。

基于在/login 之前调用/signup 的假设，您需要一个与.then(() => {post()...} 相同缩进级别的catch 块。