使用reactjs和Nodejs中的fetch API在POST登录中拒绝承诺

Question

我正在使用带有 NodeJs API 的 Reactjs 中的 POST Fetch 进行简单的登录。 当我们使用正确的用户名和密码登录时，代码运行良好并重定向页面，但问题在于使用假用户名时。 我在console.log 中收到了Promise 错误：“已拒绝”。 我还是想不通为什么

这是 login.js 中的代码

async SubmitLogin(event){
  event.preventDefault();
  //debugger;
  console.log(this.state)
  await fetch(`http://localhost:4000/login`, {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
      },
      body: JSON.stringify(this.state)
  })
  .then ((response) => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    // then Read the response as json.
    else {
      let result = response.json();
      console.log(result)
      if(result === 'Invalid'){
        console.log(response)
        alert('Invalid User');
        //this.props.history.push('/login');
      }
        else {
          alert('Login Sucessfull');
          this.props.history.push('/home');
        }
    }
  })
  .catch((err) => {
    console.error();
  })
}

在我的 server.js 中，我使用了这样的 express-session：

//sales login
app.post('/login', jsonParser, (req, res) => { //jsonParser,
    let username = req.body.username;
  let password = req.body.password;
  console.log("req: ",req.body);
    if (username && password) {
        dbConn.query(`SELECT * FROM user_tbl WHERE username = ? AND password = ?`, [username, password], (err, results, fields) => {
            if (results.length > 0) {
                req.session.loggedin = true;
                req.session.username = username;
        res.redirect('/home');
        console.log(results)
        console.log("req: ", req.body);
            } else {
                res.send('Incorrect Username and/or Password!');
            }           
            res.end();
        });
    } else {
        res.send('Please enter Username and Password!');
        res.end();
    }
});

app.get('/home', (req, res) => {
    if (req.session.loggedin) {
        res.send('Welcome back, ' + req.session.username + '!');
    } else {
        res.send('Please login to view this page!');
    }
    res.end();
});

这是我在控制台中得到的结果：

希望我的问题很清楚。

Answer 1

我认为您的回复不是 json 格式。您无法将字符串解析为 json。

您的回复应该是这样的res.send({success:false , message : "Incorrect Username and/or Password!"})

Answer 2

经过多次建议和回答，我终于可以弄清楚如何解决这个问题。 这是 login.js 中的代码

  //submit function
  async SubmitLogin(event){
    event.preventDefault();
    console.log(this.state)
    await fetch(`http://localhost:4000/login`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(this.state)
    })
    .then ((response) => {
      if(response.status === 401) {
          throw new Error('Unauthorized');
      }
      //return response.json();
    })
    .then((result) => {
      console.log(result);
      this.props.history.push('/home');
      alert('Login Sucessfull');
    })
    .catch((err) => {
      console.log();
    })
  }

在后端，我没有改变任何东西。