Axios响应未定义

Question

在axios post请求后显示服务器验证响应时，我有一个小问题。我试图控制台日志服务器响应errorMessage: "请表单提交后所有必需的字段。控制台一直显示"未定义"。在服务器端，一切正常，网络选项卡显示正确的响应。

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>;

控制台错误

网络登录端点响应

Answer 1

您正在使用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)
})

Answer 2

只是为了补充一些已经说过的东西。你不需要使用.then()如果你正在使用，则等待．您可以这样尝试:

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

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

Answer 3

因为你使用的是promise，所以不会抛出异常，所以它不会碰到try catch块。您需要在承诺中添加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