面试题：Angular中如何创建一个基本的HTTP请求拦截器

Question

请描述在Angular中创建一个HTTP请求拦截器的基本步骤，并且给出一个简单示例代码，拦截器需要能够在请求发送前添加一个通用的请求头。

Answer 1

创建HTTP请求拦截器基本步骤：

1. 创建拦截器类：实现HttpInterceptor接口，该接口定义了intercept方法，用于处理请求拦截逻辑。
2. 注册拦截器：在providers数组中提供拦截器，以便Angular能识别并使用它。

示例代码：

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

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 添加通用请求头
    const newRequest = request.clone({
      headers: request.headers.set('Custom-Header', 'Value')
    });
    return next.handle(newRequest);
  }
}

在模块中注册拦截器：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { CustomHttpInterceptor } from './custom - http - interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomHttpInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}