Angular HTTPInterceptor 的使用一例

假设你有一个 Angular 应用程序，其中有一个组件需要从服务器获取特定模型的数据。你可以使用上述方法将一个名为queryProductModel的查询参数添加到请求中，以便服务器能够根据该参数返回相应的模型数据。

首先，你需要创建一个实现HttpInterceptor接口的拦截器。以下是一个示例的拦截器代码：

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

@Injectable()
export class queryProductModelInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const modifiedRequest = request.clone({
      setParams: {
        queryProductModel: 'true'
      }
    });

    return next.handle(modifiedRequest);
  }
}

接下来，你需要将拦截器注册到你的 Angular 应用程序中。你可以在根模块的提供商（providers）数组中注册该拦截器，如下所示：

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { queryProductModelInterceptor } from './query-product-model.interceptor';

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

在上述示例中，我们将queryProductModelInterceptor拦截器注册为HTTP_INTERCEPTORS提供商，并将multi属性设置为true，以确保不覆盖其他已注册的拦截器。

现在，当你的组件通过 Angular 的 HTTP 客户端发送请求时，拦截器将在请求发出之前修改请求并添加queryProductModel=true的查询参数。

假设你的组件中有一个使用HttpClient进行数据请求的方法，示例如下：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="getData()">Get Data</button>
  `
})
export class MyComponent {
  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('https://example.com/api/data').subscribe(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

当你点击"Get Data"按钮时，getData()方法将发送一个 HTTP GET 请求到https://example.com/api/data。由于我们已经注册了queryProductModelInterceptor拦截器，该拦截器将修改请求并添加queryProductModelModel=true的查询参数。

在 Chrome 开发者工具中，你可以观察到实际发送的 HTTP 请求的 URL 是https://example.com/api/data?queryProductModel=true。这意味着拦截器成功地将查询参数添加到了请求中，并且该参数将被发送到服务器以获取相应的模型数据。

请注意，示例中的 URL（https://example.com/api/data）只是一个占位符，你需要将其替换为实际的服务器端点 URL，以确保请求能够到达正确的服务器。

在 Angular 的 HttpInterceptor 接口中，intercept 和 handleRequest 方法各自具有不同的作用。

1. intercept 方法：

   • intercept 方法是 HttpInterceptor 接口的核心方法之一。
   • 该方法用于拦截传出的 HTTP 请求和传入的 HTTP 响应，并对它们进行处理或修改。
   • 在 intercept 方法中，你可以访问到原始的请求对象和请求处理器对象，可以修改请求的头部、URL、参数等，并且可以添加、删除或修改请求的拦截器。
   • 你可以在 intercept 方法中执行一些额外的逻辑，如添加身份验证信息、处理错误、记录日志等。
   • 最后，你需要调用 next.handle(request) 将修改后的请求传递给下一个拦截器或最终的请求处理器。

2. handleRequest 方法：

   • handleRequest 方法是请求处理器（request handler）的一部分，用于处理最终的 HTTP 请求。
   • 在 intercept 方法中的最后一步，你需要调用 next.handle(request)，这将触发 handleRequest 方法的执行。
   • handleRequest 方法将接收到经过拦截器链处理后的最终请求对象，并处理该请求，发送它到服务器并等待响应。
   • 你可以在 handleRequest 方法中执行一些与请求和响应相关的操作，例如发送请求、处理响应、处理错误等。
   • handleRequest 方法返回一个 Observable 对象，用于订阅响应并对其进行处理。

综上所述，intercept 方法用于拦截和修改传出的 HTTP 请求，并在最后调用 next.handle(request) 将修改后的请求传递给下一个拦截器或最终的请求处理器。而 handleRequest 方法则负责实际处理最终的 HTTP 请求，并返回一个可观察对象以进行响应的处理。

通过这两个方法的组合使用，你可以在 Angular 中的 HTTP 拦截器中实现对请求和响应的拦截、修改和处理，以及执行额外的逻辑操作。