Angular怎么对请求进行拦截封装

在现代的前端开发中，与后端进行数据交互是不可避免的。Angular 提供了强大的 HTTP 客户端模块 HttpClient，使得我们能够轻松地发送 HTTP 请求。然而，在实际开发中，我们通常需要对请求进行一些统一的处理，例如添加认证信息、处理错误、添加日志等。为了简化这些操作，Angular 提供了 HTTP 拦截器（Interceptor）机制，允许我们在请求发送和响应接收时进行拦截和处理。

本文将详细介绍如何在 Angular 中对请求进行拦截封装，包括拦截器的基本概念、如何创建和使用拦截器、以及一些常见的应用场景。

1. 什么是 HTTP 拦截器？

HTTP 拦截器是 Angular 提供的一种机制，允许我们在 HTTP 请求发送到服务器之前和响应返回到应用程序之前对其进行拦截和处理。拦截器可以用于多种场景，例如：

• 添加请求头（如认证信息）
• 统一处理错误
• 添加日志
• 缓存请求
• 转换请求或响应数据

拦截器本质上是一个实现了 HttpInterceptor 接口的类，该接口定义了一个 intercept 方法，用于拦截和处理 HTTP 请求。

2. 创建 HTTP 拦截器

要创建一个 HTTP 拦截器，我们需要实现 HttpInterceptor 接口，并实现其中的 intercept 方法。下面是一个简单的拦截器示例：

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

@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 your-auth-token')
    });

    // 继续处理请求
    return next.handle(authReq);
  }
}

在这个示例中，我们创建了一个名为 AuthInterceptor 的拦截器，它在每个请求的头部添加了一个 Authorization 字段，用于传递认证信息。

2.1 拦截器的核心方法 intercept

intercept 方法是拦截器的核心方法，它接收两个参数：

• req: HttpRequest<any>：当前的 HTTP 请求对象。
• next: HttpHandler：用于将请求传递给下一个拦截器或最终的 HTTP 处理器。

在 intercept 方法中，我们可以对请求进行修改，例如添加请求头、修改请求体等。修改后的请求可以通过 req.clone() 方法创建一个新的请求对象。

最后，我们需要调用 next.handle(authReq) 将修改后的请求传递给下一个拦截器或最终的 HTTP 处理器。

2.2 注册拦截器

创建拦截器后，我们需要将其注册到 Angular 的 HTTP 拦截器链中。这可以通过在 AppModule 中提供拦截器来实现：

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}

在上面的代码中，我们通过 HTTP_INTERCEPTORS 令牌将 AuthInterceptor 注册为 HTTP 拦截器。multi: true 表示我们可以注册多个拦截器，它们将按照注册的顺序依次执行。

3. 常见的拦截器应用场景

3.1 添加认证信息

在许多应用中，我们需要在每个请求中添加认证信息，例如 JWT（JSON Web Token）。通过拦截器，我们可以轻松地在每个请求的头部添加 Authorization 字段：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = localStorage.getItem('auth_token');
    if (authToken) {
      const authReq = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${authToken}`)
      });
      return next.handle(authReq);
    }
    return next.handle(req);
  }
}

在这个示例中，我们从本地存储中获取认证令牌，并将其添加到请求头中。

3.2 统一处理错误

在 HTTP 请求过程中，可能会发生各种错误，例如网络错误、服务器错误等。通过拦截器，我们可以统一处理这些错误，例如显示错误提示、记录日志等：

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 处理未授权错误
          console.error('Unauthorized request:', error);
        } else if (error.status === 500) {
          // 处理服务器错误
          console.error('Server error:', error);
        }
        // 继续抛出错误，以便在组件中处理
        return throwError(error);
      })
    );
  }
}

在这个示例中，我们使用 catchError 操作符捕获请求中的错误，并根据错误状态码进行相应的处理。

3.3 添加请求日志

在某些情况下，我们可能需要记录每个请求的详细信息，例如请求 URL、请求方法、请求时间等。通过拦截器，我们可以轻松地添加请求日志：

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const startTime = Date.now();
    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          const elapsedTime = Date.now() - startTime;
          console.log(`Request to ${req.url} took ${elapsedTime}ms`);
        }
      })
    );
  }
}

在这个示例中，我们使用 tap 操作符记录请求的响应时间。

3.4 缓存请求

在某些情况下，我们可能希望缓存某些请求的结果，以避免重复请求。通过拦截器，我们可以实现简单的请求缓存机制：

@Injectable()
export class CacheInterceptor implements HttpInterceptor {
  private cache = new Map<string, HttpResponse<any>>();

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method !== 'GET') {
      return next.handle(req);
    }

    const cachedResponse = this.cache.get(req.url);
    if (cachedResponse) {
      return of(cachedResponse);
    }

    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.cache.set(req.url, event);
        }
      })
    );
  }
}

在这个示例中，我们使用一个 Map 对象来缓存 GET 请求的响应结果。如果请求的 URL 已经存在于缓存中，则直接返回缓存的响应。

4. 多个拦截器的执行顺序

在实际开发中，我们可能会使用多个拦截器来处理不同的任务。Angular 会按照拦截器的注册顺序依次执行它们。例如，如果我们注册了 AuthInterceptor 和 LoggingInterceptor，那么它们的执行顺序如下：

1. AuthInterceptor 首先执行，添加认证信息。
2. LoggingInterceptor 随后执行，记录请求日志。

因此，拦截器的注册顺序非常重要，需要根据实际需求进行合理安排。

5. 总结

HTTP 拦截器是 Angular 中非常强大的工具，它允许我们在请求发送和响应接收时进行统一的处理。通过拦截器，我们可以轻松地实现认证、错误处理、日志记录、请求缓存等功能，从而简化代码并提高开发效率。

在实际开发中，我们可以根据需求创建多个拦截器，并通过合理的注册顺序来确保它们按照预期执行。希望本文能够帮助你更好地理解和使用 Angular 中的 HTTP 拦截器机制。