Question

我的问题是下一个：

//express server
app.post('/register', (req, res) => {
    const {
        password,
        passwordConfirm
    } = req.body;
    if (password === passwordConfirm) {
     //...
    } else {
        res.status(400).json("Passwords aren't matching")
    }
})
//react function
    onSubmitSignIn = () => {
        const { password, passwordConfirm } = this.state;
        let data = new FormData();
        data.append('password', password);
        data.append('passwordConfirm', passwordConfirm);
        
        fetch('http://localhost:3001/register', {
            method: 'post',
            body: data
        })
        .then(response => response.json())
        .then(user => {
            //logs error message here
            console.log(user)
        })
        //but I want to catch it here, and set the message to the state
        .catch(alert => this.setState({alert}))
    }

当我发送状态代码，并将来自express的消息作为响应时，前端显然将其识别为响应，这就是为什么它将消息以“用户”身份记录到控制台的原因。但是如何发送到catch函数的错误呢？

Answer 1

fetch实际上仅在由于某种原因无法解释API的情况下才会出错。换句话说，它将因网络错误而出错。对于非2XX状态代码，不会明确显示错误。

您需要按照此处所述检查ok属性：

-

fetch('http://localhost:3001/register', {
    method: 'post',
    body: data
 })
 .then(response => {
     if (!response.ok) {
         throw new Error('my api returned an error')
     }
     return response.json()
 })
 .then(user => {

      console.log(user)
  })
  .catch(alert => this.setState({alert}))

Answer 2

问题是fetch不能将HTTP错误识别为Promise拒绝。

即使响应是HTTP 404或500，从fetch（）返回的Promise也不会拒绝HTTP错误状态。它会正常解析，并且只会在网络故障或任何阻止请求的情况下拒绝。完成。

（Source）

您可以签出fetch存储库的链接源，该源还提出了处理HTTP错误状态的建议。

Answer 3

如果抛出错误怎么办：

app.get("/", function (req, res) {
  throw new Error("BROKEN"); // Express will catch this on its own.
});

然后在前端捕获此错误？

请参见here以供参考

编辑

也许您应该使用return next()返回错误，以便在服务器方法中不处理其余代码：

 app.get("/", function (req, res) {
     return next(new Error('BROKEN'));
 });

Answer 4

order.capType

如何通过expressjs的响应在前端捕获错误？

4 个答案: