MEAN Stack 中的错误拦截器

在上一节中，我们成功地摆脱了登录和注册组件中的无限加载微调器。 在上一节的最后，我们仍然遇到了一个错误，并且我们提到当我们遇到错误时最好有一些错误消息。 为此，我们将使用一个 Angular Material 组件。 在那里，我们有一个组件，即对话框组件。

我们将使用对话框组件来显示错误消息。 为了使用它，我们必须使用对话框服务提供程序打开一个对话框，并且我们传递组件引用，该组件将渲染在该对话框中。 简单的解决方案是只在模板中添加一些 div，然后将 ngIf 与一些错误条件结合使用以显示或隐藏它。 我们将使用对话框，为了使用它，我们将按照以下步骤操作

1) 首先，我们需要注册一个全局错误处理程序，并且由于我们的错误与 HTTP 错误有关，我们希望再次使用我们的拦截器。 我们使用 auth-interceptor 拦截所有传出的请求并添加授权标头。 我们可以添加另一个拦截器，我们将其添加到我们的根文件夹中，因为它将影响整个应用程序。 我们将添加一个新的拦截器文件，即 error-interceptor.ts。

2) 在此文件中，我们将创建一个拦截器，就像我们为 auth 做的那样。 因此，我们将复制 auth-interceptor 的整个代码并将其粘贴到我们的 error-interceptor.ts 文件中。 我们不需要 auth 服务，因此我们将从此处删除 auth 服务的代码。 我们只想在拦截器方法中返回请求，但现在我们也可以在那里侦听响应。 我们不想编辑请求。 我们想侦听响应，handle 方法会把响应的可观察流返回给我们。

3) 我们可以直接进入该流并侦听事件。 我们可以使用 rxjs 提供的 pipe() 方法向该流添加一个运算符。 我们要添加一个特殊的运算符，即 catchError 运算符。 顾名思义，此运算符允许我们处理流中发出的错误。 我们将为我们的 HTTP 请求添加此运算符，因此我们将讨论 HTTP 错误。

4) 在 catchError 函数中，我们必须传递我们将获取错误的函数，该函数的类型将是 HttpErrorResponse。 我们将将其记录到控制台，并且我们必须记住的一件事是，我们只是向该可观察流添加了一些内容。 我们正在处理我们应用程序的不同位置。 因此，即使我们遇到错误，我们也要在 catchError 中返回一个可观察对象。 我们可以使用 throwError()，它将生成一个新的可观察对象。 我们将简单地将错误传递给该函数并将其作为可观察对象返回。

5) 因此，现在我们只是返回带有错误的可观察对象，但我们可以在控制台日志错误的位置进行一些错误处理。 例如，我们可以使用 alert 来抛出一个普通的 JavaScript alert。 错误对象有一个错误属性，这将是错误响应的响应主体，在那里，我们可以输出消息。

6) 现在，我们将在我们的应用模块中注册拦截器，我们也在其中注册了 auth-interceptor，添加以下提供程序

注意：我们需要将我们的类名重命名为 ErrorInterceptor。

现在，每个传出的 http 请求都将由这个拦截器监视，如果我们收到一个错误响应，拦截器应该启动。

我们收到一个未定义的 alert，因为我们没有消息，但是我们看到拦截器正在执行某些操作，并且我们看到了来自拦截器内部的日志。 在那里，我们可以看到我们收到的错误响应。

我们成功添加了拦截器，在下一节中，我们将使用它并添加一些更好的错误消息，而不是这个 alert。