假设你有一个 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, next: HttpHandler): Observable> {
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: `
`
})
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 方法各自具有不同的作用。
intercept方法：intercept方法是HttpInterceptor接口的核心方法之一。- 该方法用于拦截传出的 HTTP 请求和传入的 HTTP 响应，并对它们进行处理或修改。
- 在
intercept方法中，你可以访问到原始的请求对象和请求处理器对象，可以修改请求的头部、URL、参数等，并且可以添加、删除或修改请求的拦截器。 - 你可以在
intercept方法中执行一些额外的逻辑，如添加身份验证信息、处理错误、记录日志等。 - 最后，你需要调用
next.handle(request)将修改后的请求传递给下一个拦截器或最终的请求处理器。
handleRequest方法：handleRequest方法是请求处理器（request handler）的一部分，用于处理最终的 HTTP 请求。- 在
intercept方法中的最后一步，你需要调用next.handle(request)，这将触发handleRequest方法的执行。 handleRequest方法将接收到经过拦截器链处理后的最终请求对象，并处理该请求，发送它到服务器并等待响应。- 你可以在
handleRequest方法中执行一些与请求和响应相关的操作，例如发送请求、处理响应、处理错误等。 handleRequest方法返回一个Observable对象，用于订阅响应并对其进行处理。
综上所述，intercept 方法用于拦截和修改传出的 HTTP 请求，并在最后调用 next.handle(request) 将修改后的请求传递给下一个拦截器或最终的请求处理器。而 handleRequest 方法则负责实际处理最终的 HTTP 请求，并返回一个可观察对象以进行响应的处理。
通过这两个方法的组合使用，你可以在 Angular 中的 HTTP 拦截器中实现对请求和响应的拦截、修改和处理，以及执行额外的逻辑操作。