Angular 显示每个 HTTP 请求的微调器，只需很少的代码更改

# 优化Angular应用程序中的HTTP请求拦截器

typescript
import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest,
    next: HttpHandler
  ): Observable> {
    // 在请求发送之前输出请求信息
    console.log('发出请求：', request);
    return next.handle(request).pipe(
      tap(
        event => {
          // 在收到响应时输出响应信息
          console.log('收到响应：', event);
        },
        error => {
          // 在出现错误时输出错误信息
          console.error('发生错误：', error);
        }
      )
    );
  }
}

typescript
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoggingInterceptor } from './path-to-logging-interceptor';
@NgModule({
  // ...其他模块配置
  providers: [
    // ...其他提供者
    { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
  ],
})
export class YourAppModule {}