获取 api 请求时如何捕获错误？ [复制]答案

【问题标题】：How to catch the error when making fetch api request? [duplicate]获取 api 请求时如何捕获错误？ [复制]
【发布时间】：2020-11-16 01:24:16
【问题描述】：

我正在使用 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)
    });
  }

而我的then-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 而不是 Angular 的 HttpClient？
您使用 fetch 而不是 Angular Http 客户端是否有特定原因？
“老板”希望我只使用 fetch api，而不是 jquery 或其他等。
这不是 Angular 应用程序..？它有一个非常好的 http 客户端内置..？
是的，兄弟，我知道 :(，但是当老板想要它时，不幸的是。

标签： javascript angular typescript fetch fetch-api

【解决方案1】：

当 fetch 请求从服务器返回错误代码时，promise 的 catch 不会执行，then 会执行。 catch 仅在网络故障时执行。见the fetch docs：

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

您需要做的是，在您的then 中，检查response.ok。如果response.ok == false，则请求返回错误。您可以在 response.status 和 response.statusText 中找到有关此错误的信息。

【讨论】：

【解决方案2】：

如果你使用的是 async await，你不应该像解决一个 promise 那样链接 .thens。

我调整了您的代码并将其包装在 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)
    }
}

【讨论】：