使用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();
    })
  }

在后端，我沒有改變任何東西。