Axios 响应未定义答案

【问题标题】：Axios response undefinedAxios 响应未定义
【发布时间】：2021-05-26 04:31:07
【问题描述】：

我在 axios post req 后显示服务器身份验证响应时遇到了一点问题。我正在尝试控制台日志服务器响应错误消息：“请在表单提交后填写所有必填字段。控制台一直显示“未定义”。在服务器端一切都很好，网络选项卡显示正确的响应。

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState("");

  const { getLoggedIn } = useContext(AuthContext);
  const history = useHistory();
  async function login(e) {
    e.preventDefault();
    try {
      const loginData = {
        email,
        password,
      };

      const res = await axios
        .post("http://localhost:5000/auth/login", loginData)
        .then((result) => {
          console.log(result.data);
        });

      await getLoggedIn();

      history.push("/player");
    } catch (err) {
      console.log(err.data);
    }
  }

  return (
    <div className="authWrapper">
      <form className="box" onSubmit={login}>
        <h1>LOGIN</h1>
        <input
          autoComplete="off"
          className="input"
          type="email"
          placeholder="Email"
          onChange={(e) => setEmail(e.target.value)}
          value={email}
        />
        <input
          autoComplete="off"
          className="input"
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
          value={password}
        />
        <button className="submit" type="submit">
          {`Log in${" "}`}
          <FontAwesomeIcon icon={faArrowRight}></FontAwesomeIcon>
        </button>

        <Link to="/register">
          <button className="changeForm">
            {`Register${" "}`}
            <FontAwesomeIcon icon={faSync}></FontAwesomeIcon>
          </button>
        </Link>
      </form>
    </div>
  );
};

export default Login;
<div></div>;

console error

Network login endpoint response

【问题讨论】：

看看这个：stackoverflow.com/questions/49967779/axios-handling-errors

标签： javascript reactjs axios

【解决方案1】：

只是为已经说过的内容添加一些内容。如果您使用 await，则无需使用 .then() 来表示承诺。你可以这样试试：

const res = await axios.post("http://localhost:5000/auth/login", loginData)
console.log(res.data);

您将等待服务器的响应。一旦你得到它，它将被存储在你创建的 res 常量中。此外，您需要在每次编写 try 之后添加一个 catch 块。

【讨论】：

【解决方案2】：

因为您使用的是 Promise，所以不会抛出异常，因此它不会命中您的 try catch 块。您需要在 promise 上添加 catch ：

      const res = await axios
        .post("http://localhost:5000/auth/login", loginData)
        .then((result) => {
          console.log(result.data);
        }).catch((error) => {
          console.error(error);
        });

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch

【讨论】：

【解决方案3】：

你们都在等待使用async/await 的响应并使用承诺链.post().then().catch()

试试这个：

axios.post("http://localhost:5000/auth/login", loginData)
      .then((result) => {
          console.log(result.data);
          await getLoggedIn();
          history.push("/player");
        })
      .catch(err => {
         console.log(err)
      })

【讨论】：