解决方案

在前端开发中，我们经常需要处理 HTTP 请求的错误。然而，在 Angular 应用程序中获取实时 HTTP 错误信息并不是一件非常容易的事情。本文将介绍一种解决方案，使得在 Angular 应用程序中获取实时 HTTP 错误信息轻而易举。

问题

在 Angular 应用程序中，我们通常使用 Angular 提供的内置 HttpClient 来进行 HTTP 请求。当请求发生错误时，我们希望能够捕获错误并获取错误信息。然而，默认情况下，HttpClient 是不会主动抛出错误的。取而代之的是，HttpClient 会返回一个包含错误信息的 Observable 对象，我们需要在订阅时手动处理这些错误。

这意味着在我们的每一个 HTTP 请求中，都需要进行重复的错误处理。这显然是一种低效而且容易出错的方式。

我们提供了一种解决方案，在 Angular 应用程序中获取实时 HTTP 错误信息将变得轻而易举。我们使用了一个 HttpInterceptor，这个 HttpInterceptor 会在每一个 HTTP 请求中拦截并处理错误。一旦发生错误，它会抛出一个新的 Observable 对象，我们就可以在任何地方订阅这个对象，获取实时的错误信息了。

具体来说，我们需要做以下几个步骤：

步骤 1: 创建 ErrorInterceptor

我们需要先创建一个新的 HttpInterceptor，用于拦截和处理 HTTP 请求中的错误。以下是一个简单的 ErrorInterceptor 的实现：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
      catchError(error => {
        if (error instanceof HttpErrorResponse) {
          console.error(`[Http Error] ${req.url}`, error);
          return throwError(error);
        } else {
          return throwError(error);
        }
      })
    );
  }
}

在上面的代码中，我们定义了一个名为 ErrorInterceptor 的 HttpInterceptor，并实现了 intercept 方法。

在 intercept 方法中，我们使用 next.handle(req) 来发起 HTTP 请求，并使用 pipe 函数将 catchError 操作符和 return throwError(error) 操作符添加到 Observable 链中。catchError 操作符用于捕获 HTTP 请求中发生的错误，return throwError(error) 用于重新抛出错误，以便我们可以在其他地方订阅这个错误。

步骤 2: 将 ErrorInterceptor 添加到 HttpClient 中

我们需要在 Angular 应用程序中注册 ErrorInterceptor，以便它能拦截每一个 HTTP 请求。以下是一个简单的注册方式：

// javascriptcn.com 代码示例
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { ErrorInterceptor } from './error.interceptor';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的代码中，我们在 providers 中注册了 ErrorInterceptor，并将其提供给 HTTP_INTERCEPTORS。这样就成功将 ErrorInterceptor 添加到了 HttpClient 中。

步骤 3: 订阅并处理错误

我们已经创建了一个 ErrorInterceptor，并成功将它添加到了 HttpClient 中。现在，我们可以在任何地方订阅错误并处理错误了。以下是一个简单的示例：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="errorMessage">
      {{ errorMessage }}
    </div>
  `
})
export class AppComponent {
  errorMessage: string;

  constructor(private http: HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/todos/281').subscribe(
      (result) => {
        console.log(result);
      },
      (error) => {
        this.errorMessage = error.message;
        console.error(error);
      }
    );
  }
}

在上面的代码中，我们首先创建了一个 errorMessage 变量，并将其绑定到了模板中。然后，我们使用 HttpClient 发起了一个 HTTP 请求，并订阅了这个请求。当 HTTP 请求发生错误时，我们会重新抛出这个错误并捕获它，将 errorMessage 变量更新为错误信息，并打印错误信息到控制台。

总结

现在，您已经掌握了一种在 Angular 应用程序中获取实时 HTTP 错误信息的解决方案。通过使用我们提供的 ErrorInterceptor，您可以轻松地捕获和处理每一个 HTTP 请求中的错误。如果您在实现过程中遇到任何问题，请随时联系我们。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654f38117d4982a6eb8327d8