Angular的Http请求Observable无法捕获错误？

Question

使用HttpClient的Angular 6。目前没有实现拦截器。

我有一个管理员服务，在其中对MSGraph进行http调用。在这种情况下，我收到了一个400错误请求，我将其发送到通知处理程序。

我已经添加了console.log来确保错误块是否被触发，以及另一个console.log来查看从服务器返回的'data'是否是错误。

所有的console.logs都没有触发，但全局错误处理程序仍然在控制台中显示400错误请求响应。

我想能够使用此响应并显示用户友好的消息。

代码：

this.http.get(this.GRAPH_ROOT_URL + this.APP_ID, { headers }).subscribe(data => {
  this.notification.done(data);
  console.log(data);
}), error => {
  this.notification.error(`Error getting users from Microsoft GRAPH API. Reason: ${error}`)
  console.log("this is observable error", error);
}

- SebastianG

---

Angular 的哪个版本？ - Cobus Kruger

抱歉，Angular6--忘记添加了！ - SebastianG

添加一个参数到subscribe函数中 - 完整的回调函数和console.log。 - Ludevik

@Ludevik，您能否详细说明一下？我不太确定该参数的样子。 - SebastianG

我指的是普通回调：() => console.log('Completed')。订阅函数需要传入3个参数 - 成功、错误和完成，它们都是回调函数，因此您可以像成功和错误的函数一样在那里传递一些函数。我的想法是调用完成回调。 - Ludevik

Answer 1

Angular 6使用RxJS 6，其中有许多更改。假设您正在使用它，这是我会使用的内容：

以下是我将要使用的内容：

this.http.get(this.GRAPH_ROOT_URL + this.APP_ID, { headers })
    .pipe(catchError(err => {
      this.alert.error('There was an error getting data');
      return throwError(err);
    })).subscribe(data => this.notification.done(data));

所以你使用 pipe 调用 catchError，它可以正确地处理服务器错误。

要使用 catchError，你需要先导入它，像这样：

import { catchError } from 'rxjs/operators';

- Cobus Kruger

---

@SebastianG 如果你要投入时间，可以更进一步地将 HttpClient 封装成自己的服务。这样做确实可以使这种事情变得更简单，并为你提供额外的选项。例如，我的实际代码还包括了 GET 的自动重试和成功或失败的可视化通知。 - Cobus Kruger

抱歉，我的服务基本上具有相同的“Get”，“Post”等功能，但为“catchError”和“retry”（仅适用于“Get”）添加了“pipe”调用。它还调用通知服务，这似乎与您的类似。重点是它为您提供选项，并且您可以随意扩展。我还有某些重载，可以自动将单个对象放置在数组中等等。您也可以使用拦截器完成其中的大部分工作，但我总是会进行包装。 - Cobus Kruger

啊哈。这是在我的 pipe 之前添加了一个简单的 .pipe(retry(2))，用于 catchError。因此它最多尝试三次，然后才返回错误。retry 是从与 catchError 相同的模块中导入的。 - Cobus Kruger

哈哈！那将非常有价值，我简直不敢相信自己没想到这个！感谢你的帮助。祝你好运！ - SebastianG

这不起作用。BadRequest响应仍会在浏览器中引发异常，但永远不会命中代码。 - Egor Pavlikhin