Angular 拦截器是非常强大的工具，开发人员可以使用它来管理应用程序处理 HTTP 请求和响应的方式。它们在实现日志记录、身份验证、错误处理等功能方面发挥着至关重要的作用，从而使代码更清晰、更易于维护。

Angular 拦截器充当 Angular 应用程序和服务器之间的中间件。它们在请求发送到服务器之前拦截请求，并在请求到达我们的应用程序组件之前拦截响应。这允许开发人员通过添加标头、修改请求/响应主体以及更改状态代码来修改请求。

设置你的 Angular 项目

首先，确保您安装了 Angular CLI。如果没有，可以使用 npm 安装：

npm install -g @angular/cli

现在，创建一个新的 Angular 项目：

ng new Project_Name
cd Project_Name

现在，使用 Angular CLI 生成一个新的 HTTP 拦截器：

ng generate interceptor interceptors/interceptorName

这将在src/app/interceptors目录中创建两个文件：interceptorName.interceptor.ts和interceptorName.interceptor.spec.ts。

现在，打开interceptorName.interceptor.ts并添加拦截器的逻辑。这是一个记录消息的示例。

import { HttpInterceptorFn } from '@angular/common/http';

export const interceptorName: HttpInterceptorFn = (req, next) => {
  console.log('HTTP Request:', req);
  return next(req);
};

现在，要使用拦截器，请打开app.config.ts并将其添加到providers数组中：

...
import { provideHttpClient,withInterceptors } from '@angular/common/http';
import { interceptorName } from './interceptors/interceptorName.interceptor';


export const appConfig: ApplicationConfig = {
  providers: [
    ....
    provideHttpClient(
      withInterceptors([interceptorName])
    ),
  ],
};

角度拦截器的高级用例

请求和响应的自定义转换

拦截器可以为请求和响应定制数据转换，例如在应用程序处理请求正文、标头或响应数据格式之前修改它们。

import { HttpInterceptorFn, HttpResponse } from '@angular/common/http';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    body: { title:"Modified Request Body",id: 1 },
  });
  return next(modifiedReq);
};

测试场景的模拟

开发人员可以在测试期间使用拦截器模拟 HTTP 响应来模拟不同的服务器情况，而无需依赖实时后端服务。这种方法可以正确评估各种场景。

import { HttpInterceptorFn } from '@angular/common/http';
import { of } from 'rxjs';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
    // Mock response for testing
    if (req.url.endsWith('/test')) {
    const mockResponse = { id: 1, title: 'Test Data' };
    return of(new HttpResponse({ status: 200, body: mockResponse }));
  }
    // Pass through to actual HTTP request
    return next(req);
}

错误处理和重试机制

Angular 拦截器通过实施错误处理策略来增强应用程序，例如自动重试失败的请求和转换错误响应以改善用户体验。

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError,retry, throwError } from 'rxjs';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3), // Retry failed requests up to 3 times
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

这里，拦截器在处理错误之前会重试失败的请求最多3次，以确保多次尝试都能成功完成请求。

链接拦截器并控制执行顺序

在 Angular 中，开发人员可以链接多个拦截器，每个拦截器管理请求处理的不同方面，例如身份验证、日志记录或错误处理。它们按照注册的顺序运行，允许精确修改请求和响应，确保灵活管理工作流程以增强应用程序功能。

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

// First Interceptor: Authentication
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer YOUR_TOKEN`
    }
  });
  return next(authReq);
};

// Second Interceptor: Logging
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request URL:', req.url);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('Response Status:', event.status);
      }
    })
  );
};

// Third Interceptor: Error Handling
export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3),
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

// Registering Interceptors in Angular Module

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideHttpClient(
      withInterceptors([apiInterceptor,loggingInterceptor,errorHandlingInterceptor])
    ),
  ],
};

事件处理和 DOM 交互

Angular 拦截器能够在 Angular 处理 DOM 事件和交互之前拦截它们。此功能支持诸如记录用户交互、执行应用程序范围的事件处理策略或在应用程序内的事件传播之前进行附加验证等任务。

import { HttpInterceptorFn } from '@angular/common/http';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
  document.addEventListener('click', (event) => {
    console.log('Click event intercepted:', event);
    // Additional custom event handling logic
  });
  return next(req);
};

使用外部工具拦截

外部 HTTP 拦截工具在各种场景中都非常有用，特别是当您需要对 HTTP 请求和响应进行更多控制而超出内置拦截器的控制范围时。它们对于测试和调试 API、模拟不同的服务器条件以及确保您的应用程序有效处理各种边缘情况特别有用。

Requestly 就是这样一款强大的工具，可以增强您的开发工作流程。例如，假设您正在开发一个应用程序，需要测试它如何处理缓慢的网络响应。

• 安装和配置：轻松安装Requestly作为浏览器扩展，并设置规则来拦截和修改HTTP请求和响应。
• 规则管理：根据 URL、标头或查询参数定义和管理规则集，以根据特定条件拦截请求。
• 请求修改：通过添加标头、重写URL或根据预定义规则重定向请求来修改请求，方便动态测试和调试场景。
• 高级用例：利用 Requestly 模拟不同的服务器响应、模拟端点以进行测试，或在开发过程中强制执行特定的网络条件。

结论

Angular 拦截器是管理 HTTP 通信和增强 Angular 应用程序稳健性不可或缺的工具。通过掌握这些方法并探索 Requestly 等外部解决方案，开发人员可以有效地简化 API 集成、改进安全实践并优化性能。采用拦截器来提高 Angular 应用程序的可靠性和可扩展性，以自信和高效地处理各种后端交互。