Javascript 在获取期间，无法在try catch中捕获403

我正在使用ReactJS发出put请求，但是，当我输入错误的电子邮件/密码组合时，我会将其登录到Chrome上，即使我试图捕获所有错误并在

errorDiv

中显示它们：

异步连接（事件）{
试一试{
常量用户对象={
用户名：this.state.username，
密码：this.state.password
};
如果（！userObject.username | |！userObject.password）{
抛出错误（'用户名/密码为空'）；
}
let response=wait fetch（'someurl.com'）{
方法：“放”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（userObject）
});
让resJSON=wait response.json（）；
如果（！response.ok）{
抛出错误（resJSON.message）；
}
console.info（resJSON.message）；
console.info（resJSON.message.auth_令牌）；
window.location=“/ledger/home”；
}捕获（e）{
document.getElementById（“errorDiv”）.style.display='block'；
document.getElementById（“errorDiv”）.innerHTML=e；
}
}

根据，只有遇到网络错误时，

fetch

才会抛出。

404

（或

403

）不是网络错误

从fetch（）返回的承诺不会在HTTP错误状态下拒绝，即使响应是HTTP 404或500。相反，它将正常解析（ok status设置为false），并且它只会在网络故障或任何阻止请求完成的情况下拒绝

例如，404不构成网络错误。成功获取（）的准确检查包括检查承诺是否已解析，然后检查Response.ok属性的值是否为true

---

这是因为您抛出错误，然后捕获部分代码未执行。试试这个：

async connect(event) {
  try {
    const userObject = {
      username: this.state.userName,
      password: this.state.password
    };
    if (!userObject.username || !userObject.password) {
      throw Error('The username/password is empty.');
    }
    let response = await fetch(('someurl.com'), {
      method: "PUT",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userObject)
    }).then(response => {
       response.json();
       console.info(resJSON.message);
       console.info(resJSON.message.auth_token);
       window.location = "/ledger/home";
    }).catch(e => {
    document.getElementById("errorDiv").style.display = 'block';
    document.getElementById("errorDiv").innerHTML = e;
  })
}

---

我完全同意@Sagiv，但是有一个快速的解决方法，尽管这不是一个建议的方法。 在try或promise.then（）中，您需要执行此检查

const res = await fetch();
console.log(res);    // You can see the response status here by doing res.status

因此，通过一些简单的检查，可以解决或拒绝承诺。例如在你的情况下

异步连接（事件）{
试一试{
常量用户对象={
用户名：this.state.username，
密码：this.state.password
};
如果（！userObject.username | |！userObject.password）{
抛出错误（'用户名/密码为空'）；
}
let response=wait fetch（'someurl.com'{
方法：'放'，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（userObject）
});
如果（response.status==403）抛出新错误（'403对我来说不可接受！'）；
让resJSON=wait response.json（）；
如果（！response.ok）{
抛出错误（resJSON.message）；
}
console.info（resJSON.message）；
console.info（resJSON.message.auth_令牌）；
window.location='/ledger/home'；
}捕获（e）{
document.getElementById（'errorDiv'）.style.display='block'；
document.getElementById（'errorDiv'）。innerHTML=e；
}
}

---

我强烈建议使用。关于提取问题，您可以参考此

代码正常。问题无法复制，是否在最后一行之后添加另一个捕获？因为.catch在try本身内部，所以我无法捕获它并将其显示给用户，而不是自动创建日志？