我如何查看在发送POST之前使用Fetch API从服务器发送的错误？

Question

我如何查看点击API后从服务器发送过来的错误？当我在Postman上执行此API调用时，每个错误都会正确地在正文JSON中发回。我的目标是显示发送的任何邮件，然后使用javascript显示错误（一旦我可以看到错误并且不重新加载页面，就可以这样做）。例如，一个错误是"User already exists."，但是在console.log中看不到此错误。 event.preventDefault()似乎也无法正常工作，因为页面在提交时重新加载。

// Login
document.querySelector('#login_user').addEventListener('submit', (e) => {
    e.preventDefault();

    let username = document.querySelector('#login_username').value,
    password = document.querySelector('#login_password').value;

    fetch('/users/login', {
        method: 'POST',
        headers: new Headers(),
        body: JSON.stringify({
            username: username,
            password: password
        })
    })
    .then((response) => {
        console.log(response.json());
    })
    .catch((error) => {
        console.error('Error:', error);
    });
})

这里是API

router.post('/login', passport.authenticate('local'), (req, res) => {
    User.findOne({
        username: req.body.username
    }, (err, person) => {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'application/json');
        res.json({
            success: true,
            status: 'You are successfully logged in!'
        });
    })
});

Answer 1

尝试此代码：

// Login
document.querySelector('#login_user').addEventListener('submit', (e) => {
    e.preventDefault();

    let username = document.querySelector('#login_username').value,
    password = document.querySelector('#login_password').value;

    fetch('/users/login', {
        method: 'POST',
        headers: new Headers(),
        body: JSON.stringify({
            username: username,
            password: password
        })
    })
    .then((response) => {
      return response.json()
    })
.then(data=>{
  console.log(data);
})
    .catch((error) => {
        console.error('Error:', error);
    });
})