Angular 快速入门之请求拦截与错误处理

前言

Angular 是一个流行的前端框架，用于构建 Web 应用程序。Angular 的 HttpClient 模块提供了用于与后端服务进行通信的工具，包括请求拦截和错误处理。

错误处理

在 Angular 中处理错误有几种不同的方法。最简单的方法是使用 catchError 操作符。catchError 操作符可以捕获 Observable 中的错误，并将其转换为一个新的 Observable。这个新的 Observable 可以用来显示错误信息，或者触发其他操作。

例如，以下代码演示了如何使用 catchError 操作符来处理错误：

import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

const observable = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.error(new Error('Error!'));
  observer.next(3);
});

observable.pipe(catchError(err => Observable.of('Error caught!'))).subscribe(
  value => console.log(value),
  error => console.log(error)
);

在上面的代码中，catchError 操作符捕获了 Error 错误，并将其转换为一个新的 Observable，该 Observable 发出 'Error caught!' 值。因此，当 subscribe 函数订阅此 Observable 时，控制台将输出 'Error caught!' 和 'Error!'。

请求拦截

请求拦截器允许您在请求发送到服务器之前对其进行拦截和修改。这对于添加身份验证令牌、日志记录请求或重试失败请求等任务非常有用。

要在 Angular 中创建请求拦截器，您需要创建一个实现 HttpInterceptor 接口的类。HttpInterceptor 接口定义了 intercept 方法，该方法接收一个 HttpRequest 对象和一个 HttpHandler 对象。intercept 方法可以修改 HttpRequest 对象，并返回一个新的 HttpRequest 对象或一个 Observable。

例如，以下代码演示了如何创建一个简单的请求拦截器，该拦截器会在每个请求的头部中添加 Authorization 标头：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer my-token')
    });

    return next.handle(authReq);
  }
}

要在 Angular 应用程序中使用请求拦截器，您需要在 providers 数组中注册它。例如，以下代码演示了如何注册 AuthInterceptor：

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  }
]

总结

在本文中，我们介绍了如何在 Angular 中处理错误和拦截请求。这些技术可以帮助您构建健壮且可维护的 Angular 应用程序。