1、实现步骤

  • 实现 HttpInterceptor 接口
  1. import { Injectable } from "@angular/core";
  2. import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor } from "@angular/common/http";
  4. import { Observable } from "rxjs";
  6. @Injectable()
  7. export class AuthInterceptor implements HttpInterceptor {
  8.   intercept(
  9.     req: HttpRequest<any>,
  10.     next: HttpHandler
  11.   ): Observable<HttpEvent<any>> {
  12.    ...
  13.   }
  14. }
  • 注册 Provider
  1. import { AuthInterceptor } from "./interceptors/auth.interceptor";
  3. @NgModule({
  4.   declarations: [AppComponent],
  5.   imports: [BrowserModule, HttpClientModule],
  6.   providers: [
  7.     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  8.   ],
  9.   bootstrap: [AppComponent]
  10. })
  11. export class AppModule {}

2、常见拦截器

  • AuthInterceptor 自定义请求头，如 token 之类
  1. // AuthInterceptor.ts
  2. import { Injectable } from "@angular/core";
  3. import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor } from "@angular/common/http";
  5. import { Observable } from "rxjs";
  7. @Injectable()
  8. export class AuthInterceptor implements HttpInterceptor {
  9.   intercept(
  10.     req: HttpRequest<any>,
  11.     next: HttpHandler
  12.   ): Observable<HttpEvent<any>> {
  13.     const clonedRequest = req.clone({
  14.       headers: req.headers.set("X-CustomAuthHeader", "iloveangular")
  15.     });
  16.     console.log("new headers", clonedRequest.headers.keys());
  17.     return next.handle(clonedRequest);
  18.   }
  19. }
  21. // AppModule.ts
  22. import { AuthInterceptor } from "./interceptors/auth.interceptor";
  24. @NgModule({
  25.   declarations: [AppComponent],
  26.   imports: [BrowserModule, HttpClientModule],
  27.   providers: [
  28.     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  29.   ],
  30.   bootstrap: [AppComponent]
  31. })
  32. export class AppModule {}
  • LogInterceptor 请求日志拦截器，主要记录请求花费时间、状态等
  1. // LogInterceptor.ts
  2. import { Injectable } from '@angular/core';
  3. import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } from '@angular/common/http';
  4. import { finalize, tap } from 'rxjs/operators';
  6. @Injectable()
  7. export class LogInterceptor implements HttpInterceptor {
  9.   constructor(private loggerService: LoggerService) {}
  11.   intercept(req: HttpRequest<any>, next: HttpHandler) {
  12.     const startTime = Date.now();
  13.     let status: string;
  15.     return next.handle(req).pipe(
  16.         tap(
  17.           event => {
  18.             status = '';
  19.             if (event instanceof HttpResponse) {
  20.               status = 'succeeded';
  21.             }
  22.           },
  23.           error => status = 'failed'
  24.         ),
  25.         finalize(() => {
  26.           const elapsedTime = Date.now() - startTime;
  27.           const message = req.method + " " + req.urlWithParams +" "+ status 
  28.           + " in " + elapsedTime + "ms";
  30.           console.log(message);
  31.         })
  32.     );
  33.   }
  34. }
  35. // AppModule.ts
  36. @NgModule({
  37.   declarations: [AppComponent],
  38.   imports: [BrowserModule, HttpClientModule],
  39.   providers: [
  40.     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  41.     { provide: HTTP_INTERCEPTORS, useClass: LogInterceptor, multi: true }
  42.   ],
  43.   bootstrap: [AppComponent]
  44. })
  45. export class AppModule {}
  • CacheInterceptor 请求缓存控制器
  1. // Cache.ts
  2. import { HttpRequest, HttpResponse } from '@angular/common/http';
  4. export interface Cache {
  5.   get(req: HttpRequest<any>): HttpResponse<any> | null;
  6.   put(req: HttpRequest<any>, res: HttpResponse<any>): void;
  7. }
  9. export const MAX_CACHE_AGE = 30000; // 单位为毫秒
  11. export interface CacheEntry {
  12.   url: string;
  13.   response: HttpResponse<any>;
  14.   entryTime: number;
  15. }
  17. // CacheService.ts
  18. import { Injectable } from "@angular/core";
  19. import { HttpRequest, HttpResponse } from "@angular/common/http";
  21. import { Cache } from "./cache";
  22. import { CacheEntry, MAX_CACHE_AGE } from "./cache.entry";
  24. @Injectable({
  25.   providedIn: "root"
  26. })
  27. export class CacheService implements Cache {
  28.   cacheMap = new Map<string, CacheEntry>();
  30.   constructor() {}
  32.   get(req: HttpRequest<any>): HttpResponse<any> | null {
  33.     // 判断当前请求是否已被缓存，若未缓存则返回null
  34.     const entry = this.cacheMap.get(req.urlWithParams);
  35.     if (!entry) return null;
  36.     // 若缓存命中，则判断缓存是否过期，若已过期则返回null。否则返回请求对应的响应对象  
  37.     const isExpired = Date.now() - entry.entryTime > MAX_CACHE_AGE;
  38.     console.log(`req.urlWithParams is Expired: ${isExpired} `);
  39.     return isExpired ? null : entry.response;
  40.   }
  42.   put(req: HttpRequest<any>, res: HttpResponse<any>): void {
  43.     // 创建CacheEntry对象  
  44.     const entry: CacheEntry = {
  45.       url: req.urlWithParams,
  46.       response: res,
  47.       entryTime: Date.now()
  48.     };
  49.     console.log(`Save entry.url response into cache`);
  50.     // 以请求url作为键，CacheEntry对象为值，保存到cacheMap中。并执行
  51.     // 清理操作，即清理已过期的缓存。
  52.     this.cacheMap.set(req.urlWithParams, entry);
  53.     this.deleteExpiredCache();
  54.   }
  56.   private deleteExpiredCache() {
  57.     this.cacheMap.forEach(entry => {
  58.       if (Date.now() - entry.entryTime > MAX_CACHE_AGE) {
  59.         this.cacheMap.delete(entry.url);
  60.       }
  61.     });
  62.   }
  63. }
  65. // CacheInterceptor.ts
  66. import { Injectable } from '@angular/core';
  67. import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler } from '@angular/common/http';
  68. import { of } from 'rxjs';
  69. import { tap } from 'rxjs/operators';
  71. import { CacheService } from '../cache.service';
  73. const CACHABLE_URL = "http://jsonplaceholder.typicode.com";
  75. @Injectable()
  76. export class CacheInterceptor implements HttpInterceptor {
  77.     constructor(private cache: CacheService) {}
  79.     intercept(req: HttpRequest<any>, next: HttpHandler) {
  80.         // 判断当前请求是否可缓存
  81.         if (!this.isRequestCachable(req)) { 
  82.            return next.handle(req); 
  83.         }
  84.         // 获取请求对应的缓存对象，若存在则直接返回该请求对象对应的缓存对象
  85.         const cachedResponse = this.cache.get(req);
  86.         if (cachedResponse !== null) {
  87.            return of(cachedResponse);
  88.         }
  89.         // 发送请求至API站点，请求成功后保存至缓存中
  90.         return next.handle(req).pipe(
  91.            tap(event => {
  92.               if (event instanceof HttpResponse) {
  93.                 this.cache.put(req, event); 
  94.               }
  95.            })
  96.         );
  97.     }
  99.     // 判断当前请求是否可缓存
  100.     private isRequestCachable(req: HttpRequest<any>) {
  101.         return (req.method === 'GET') && (req.url.indexOf(CACHABLE_URL) > -1);
  102.     }
  103. }
  105. // AppModule.ts 
  106. @NgModule({
  107.   declarations: [AppComponent],
  108.   imports: [BrowserModule, HttpClientModule],
  109.   providers: [
  110.     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  111.     { provide: HTTP_INTERCEPTORS, useClass: LogInterceptor, multi: true },
  112.     { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }
  113.   ],
  114.   bootstrap: [AppComponent]
  115. })
  116. export class AppModule {}
  • ResponseInterceptor 接口错误统一处理
  1. import { Injectable } from '@angular/core'
  2. import {
  3.   HttpEvent,
  4.   HttpRequest,
  5.   HttpResponse,
  6.   HttpErrorResponse,
  7.   HttpHandler,
  8.   HttpInterceptor
  9. } from '@angular/common/http'
  10. import { Observable } from 'rxjs'
  11. import { Router } from '@angular/router'
  12. import { tap } from 'rxjs/operators'
  13. import { MessageService } from '../providers'
  15. @Injectable()
  16. export class ResponseInterceptor implements HttpInterceptor {
  17.   constructor(private messageService: MessageService, private router: Router) {}
  18.   intercept(
  19.     req: HttpRequest<any>,
  20.     next: HttpHandler
  21.   ): Observable<HttpEvent<any>> {
  22.     return next.handle(req).pipe(
  23.       tap(
  24.         response => {
  25.           if (response instanceof HttpResponse) {
  26.             if (
  27.               response.status === 200 &&
  28.               response.body &&
  29.               parseInt(response.body.code, 10) !== 0
  30.             ) {
  31.               const message = response.body.message || '未知错误'
  32.               if (response.body.code === 109) {
  33.                 // token 失效
  34.                 this.router.navigate(['/login'])
  35.               }
  36.               this.messageService.addErrorMessage(message)
  37.             }
  38.           }
  39.         },
  40.         error => {
  41.           if (error instanceof HttpErrorResponse) {
  42.             if (error.status >= 500) {
  43.               this.messageService.addErrorMessage(
  44.                 `服务器内部错误 ${error.status}`
  45.               )
  46.             } else if (error.status >= 400 && error.status < 500) {
  47.               this.messageService.addErrorMessage(
  48.                 `客户端参数错误 ${error.status}`
  49.               )
  50.             }
  51.           }
  52.         }
  53.       )
  54.     )
  55.   }
  56. }