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

Posted 2023-02-27

【中文标题】获取 api 请求时如何捕获错误？ [复制]

【英文标题】：How to catch the error when making fetch api request? [duplicate]

【发布时间】：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 客户端内置..？

是的，兄弟，我知道 :(，但是当老板想要它时，不幸的是。

【参考方案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)