Javascript 如何在发出获取api请求时捕获错误？

我正在使用fetch api发送请求，并根据结果是否正确或是否包含错误来执行操作

我的服务代码：

LoginUser(user: User) {
    return fetch("http://localhost:8080/login", {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      method: 'POST',
      body: JSON.stringify(user)
    });
  }

我的

然后catch

调用上述代码的代码是：

async loginUser() {
  let response = await this._service.LoginUser(this.user)
  .then(response => {return response.json()})
  .then(response => {this._router.navigate(['/mainpage'])})
  .catch(error => {alert(error)});
 }

---

无论响应是否带有代码500内部服务器错误，它仍将重定向到

/mainpage

，并且无法识别错误。如何解决此问题？

当

获取

请求从服务器返回错误代码时，承诺的

捕获

未执行，然后被删除。只有在出现网络故障时才会执行捕获。见：

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

---

您需要做的是，在

中，然后

，检查

响应。确定

。如果

response.ok==false

，则请求返回错误。您可以在

response.status

和

response.statusText

中找到有关此错误的信息。当

获取

请求从服务器返回错误代码时，承诺的

捕获

未执行，然后

将执行。只有在出现网络故障时才会执行捕获。见：

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

您需要做的是，在
中，然后
，检查
响应。确定
。如果
response.ok==false
，则请求返回错误。您可以在
response.status
和
response.statusText
中找到有关此错误的信息，如果您使用的是async Wait，则不必继续。这就好像您正在解决承诺

我调整了代码并将其包装在try/catch中，try/catch错误将处理来自非响应的错误，但是您需要检查服务器响应本身是否存在错误

async loginUser() {

    try {
        let response = await this._service.LoginUser(this.user)

        // Check your response for error this may not be response.error
        if (response.error) {
            // Handle error
            alert(error)
        } else {
            // Navigate on success
            this._router.navigate(['/mainpage'])
        }
    } catch (err) {
        alert(err)
    }
}

如果您使用的是async Wait，那么您不必进行链接。这就好像您正在解决一个承诺

我调整了代码并将其包装在try/catch中，try/catch错误将处理来自非响应的错误，但是您需要检查服务器响应本身是否存在错误

async loginUser() {

    try {
        let response = await this._service.LoginUser(this.user)

        // Check your response for error this may not be response.error
        if (response.error) {
            // Handle error
            alert(error)
        } else {
            // Navigate on success
            this._router.navigate(['/mainpage'])
        }
    } catch (err) {
        alert(err)
    }
}

为什么使用fetch而不是Angular的HttpClient？您使用fetch而不是Angular的Http客户端有什么具体原因吗？老板希望我只使用fetch api，而不是jquery或其他。这不是Angular应用程序吗。。？它有一个非常好的http客户端内置..？是的，兄弟，我知道：（，但当老板想要它时，不幸的是，这就是它。为什么要用fetch而不是Angular的HttpClient？你使用fetch而不是Angular的http客户端有什么具体的原因吗？“老板”希望我只使用fetch api，而不是jquery或其他应用程序。这不是一个角度应用程序吗？它内置了一个非常好的http客户端。是的，兄弟，我知道：（，但当老板需要它时，不幸的是，就是这样。