Angular中如何取消非相同参数的前序未完成HTTP请求

问题根源 #

你之前使用switchMap未生效的核心原因是：每次调用drawHeatMap时都单独发起了独立的Observable订阅，没有把多次请求的触发源合并到同一个响应式流中，而switchMap只能取消同一个上游流发射的前一次未完成的内部Observable订阅，因此不生效。

方案1：RxJS Subject + switchMap（推荐） #

这是最符合RxJS响应式设计的写法，自动管理未完成请求的取消：

map.service.ts 修改代码

import { Subject, Subscription } from 'rxjs';
import { switchMap, debounceTime } from 'rxjs/operators';

@Injectable()
export class MapService {
  // 请求触发Subject，用于统一接收拉取数据的指令
  private heatMapFetchTrigger$ = new Subject<void>();
  // 维护流订阅，用于服务销毁时释放资源
  private heatMapSubscription?: Subscription;

  constructor(private http: HttpClient) {
    // 绑定响应式流，switchMap会自动取消前一次未完成的HTTP请求
    this.heatMapSubscription = this.heatMapFetchTrigger$.pipe(
      // 可选优化：加300ms防抖，频繁操作时避免无效请求，时长可按需调整
      debounceTime(300),
      switchMap(() => this.fetchData())
    ).subscribe(data => {
      // 原有数据处理逻辑放在这里
      // DO STUFF WITH DATA
    })
  }

  public drawHeatMap(): void {
    // 仅触发Subject发射值，不需要单独订阅请求
    this.heatMapFetchTrigger$.next();
  }

  // 资源销毁方法，组件卸载时调用避免内存泄漏
  public destroy(): void {
    this.heatMapSubscription?.unsubscribe();
    this.heatMapFetchTrigger$.complete();
  }

  // fetchData原有逻辑保留，动态拼接请求参数的部分不需要修改
  private fetchData(): Observable<Leaflet.HeatLatLngTuple[]> {
    return this.http.get<ResponseType>(URL).pipe(
      map(({ data }: ResponseType) => {
        return data.map((data: any) => {
          // PARSE DATA
        });
      })
    );
  }
}

map.component.ts 补充销毁逻辑

ngOnDestroy(): void {
  this.mapService.destroy();
}

方案2：手动维护订阅（改造成本更低） #

如果不想调整现有代码结构，可以手动保存上一次请求的订阅，发起新请求前主动取消：

map.service.ts 修改代码

import { Subscription } from 'rxjs';

@Injectable()
export class MapService {
  // 保存上一次请求的订阅
  private lastFetchSubscription?: Subscription;

  public drawHeatMap(): void {
    // 发起新请求前先取消上一次未完成的请求
    this.lastFetchSubscription?.unsubscribe();
    this.lastFetchSubscription = this.fetchData().subscribe((data) => {
      // 原有数据处理逻辑
      // DO STUFF WITH DATA
      // 请求完成后清空订阅引用
      this.lastFetchSubscription = undefined;
    });
  }

  // 资源销毁方法
  public destroy(): void {
    this.lastFetchSubscription?.unsubscribe();
  }

  // fetchData原有逻辑不变
  private fetchData(): Observable<Leaflet.HeatLatLngTuple[]> {
    // 原有实现
  }
}

内容的提问来源于stack exchange，提问作者Florestan Korp