React使用fetch请求时如何获取后端返回的HTTP状态码及响应内容

你混淆了Fetch API返回的响应对象属性和**后端返回的响应体内容：

1. 后端调用res.status(422).send({error:"xxx"})时，422属于HTTP响应状态码，是响应头层面的信息，不会自动加入你返回的JSON响应体中
2. 你调用await res.json()得到的data，仅对应后端send()方法传入的对象，里面只有你主动设置的error或message字段，自然不存在status属性，所以访问data.status会返回undefined

方案1：直接从Fetch响应对象取状态码（推荐，无需修改后端） #

Fetch返回的res原生自带status属性存储HTTP状态码，直接用该属性做判断即可，同时可以直接复用后端返回的错误提示，比固定文案更友好：

const res = await fetch("/signup",{
  method:"POST",
  headers: {
    "Content-Type":"application/json"
  },
  body: JSON.stringify({
    username, email, password, cpassword
  })
});

const data = await res.json();
console.log(data);
// 直接用res.status判断，不要用data.status
if(res.status === 422){
  window.alert(data.error || "注册信息无效");
  console.log("注册失败");
}
else{
  window.alert(data.message || "注册成功");
  console.log("注册成功");
  history.push("/login");
}

方案2：后端把状态码塞入响应体返回 #

如果你确实需要从响应体中获取状态码，需要修改后端代码，主动在返回的JSON中新增status字段：

const userExist = await User.findOne({email:email})
if(userExist){
     // 主动加入status字段
     return res.status(422).send({status:422, error:"该邮箱已注册"});
}else if( password != cpassword){
    return res.status(422).send({status:422, error:"两次输入的密码不一致"});
}else{
    const user = new User({username,email,password,cpassword});
    await user.save();
     res.status(200).send({status:200, message:"注册成功"});
}

修改后你原来的data.status === 422判断逻辑即可正常生效。

内容的提问来源于stack exchange，提问作者Prateek Nandle