面试题：Angular中如何实现HTTP请求的基本日志记录

Question

在Angular项目里，假设你有一个使用HttpClient发起HTTP请求的服务，阐述如何通过拦截器（Interceptor）对这些HTTP请求进行基本的日志记录，包括请求的URL、方法以及响应状态码。请简要说明实现思路并给出关键代码片段。

Answer 1

实现思路

1. 创建一个HTTP拦截器类，该类实现HttpInterceptor接口。
2. 在拦截器的intercept方法中，获取请求的URL和方法并记录日志。
3. 使用next.handle将请求传递给下一个处理器，并订阅响应，在响应中获取状态码并记录日志。

关键代码片段

1. 创建拦截器类

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 记录请求的URL和方法
    console.log(`Request URL: ${request.url}, Method: ${request.method}`);

    return next.handle(request).pipe(
      tap(event => {
        if (event.type === 4) { // 4代表HttpEventType.Response
          // 记录响应状态码
          console.log(`Response Status Code: ${(event as any).status}`);
        }
      })
    );
  }
}

2. 注册拦截器 在app.module.ts中，将拦截器注册到providers数组中：

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 { LoggingInterceptor } from './logging.interceptor';

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