Angular请求切换拦截器实现：防抖处理重复POST请求

问题解决：实现POST请求去重的Angular拦截器 #

核心思路是通过单例Subject收集POST请求，结合debounceTime延迟等待、switchMap取消重复请求的逻辑，同时满足拦截器必须返回Observable的要求。

正确实现代码 #

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

@Injectable()
export class DebouncePostInterceptor implements HttpInterceptor {
  // 收集POST请求的上下文：请求实例、处理器、订阅观察者
  private postRequest$ = new Subject<{
    req: HttpRequest<any>;
    next: HttpHandler;
    observer: Observer<HttpEvent<any>>;
  }>();

  constructor() {
    this.postRequest$.pipe(
      // 延迟300ms，等待是否有新的重复请求
      debounceTime(300),
      // switchMap自动取消之前未完成的请求，仅处理最新的一次
      switchMap(({ req, next, observer }) => {
        return next.handle(req).pipe(
          // 将请求结果回调给对应的请求发起者
          tap({
            next: event => observer.next(event),
            error: err => observer.error(err),
            complete: () => observer.complete()
          })
        );
      })
    ).subscribe(); // 必须订阅，否则流不会执行
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 非POST请求直接放行
    if (req.method !== 'POST') {
      return next.handle(req);
    }

    // 为当前POST请求创建Observable，关联全局处理流
    return new Observable((observer) => {
      this.postRequest$.next({ req, next, observer });
      return () => {}; // 可选：订阅取消时的清理逻辑，switchMap已自动处理请求取消
    });
  }
}

关键修正说明 #

1. Subject初始化：原代码中test: Subject<any>未实例化，必须用new Subject()创建实例，否则调用next()会报错。
2. 拦截器返回值：每个POST请求返回的Observable通过传递自身的observer，让全局处理流能将结果回调给对应的请求发起者，满足拦截器的返回值要求。
3. 去重逻辑实现：debounceTime(300)等待300ms确认无新请求，switchMap会取消之前未完成的请求订阅，确保仅执行最后一次POST请求，完美解决双击保存这类重复提交场景。
4. 单例特性利用：Angular拦截器默认是单例，全局仅维护一个postRequest$流，所有POST请求统一进入去重逻辑。

原代码问题分析 #

• 第一个示例：of().pipe(switchMap(() => next.handle(req)))无延迟逻辑，直接执行请求，无法拦截重复请求。
• 第二个示例：未初始化Subject，且intercept方法未返回Observable，违反Angular拦截器的类型约束。

内容的提问来源于stack exchange，提问作者Harel Malichi