Angular中使用RxJs switchMap处理HTTP请求取消场景的问题

这种场景真的太常见了——比如搜索框输入时频繁发请求，或者按钮重复点击，旧请求慢半拍返回，结果把新请求的正确结果给覆盖了。别担心，用RxJS的switchMap操作符就能轻松搞定这个问题。

核心思路：用switchMap自动取消旧订阅 #

switchMap的核心特性就是：当新的Observable发射值时，它会立即取消之前订阅的Observable。放到你的场景里，就是每次触发新请求时，自动取消还在pending的旧请求，旧请求的响应自然就不会再被处理了。

代码示例（Angular场景） #

假设你是在Angular项目里处理HTTP请求，下面是完整的组件实现：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject, takeUntil } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-request-demo',
  templateUrl: './request-demo.component.html'
})
export class RequestDemoComponent implements OnInit, OnDestroy {
  // 用来触发请求的Subject，相当于一个请求触发器
  private requestTrigger$ = new Subject<string>();
  // 组件销毁时用来取消所有订阅的信号
  private destroy$ = new Subject<void>();
  // 存储最新的请求结果
  latestResponse: any;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.requestTrigger$.pipe(
      // 每次trigger发射新值，就取消之前的HTTP请求，发起新的
      switchMap(requestParam => this.http.get(`/api/your-endpoint?param=${requestParam}`)),
      // 组件销毁时停止订阅，防止内存泄漏
      takeUntil(this.destroy$)
    ).subscribe(response => {
      // 这里只会收到最新请求的响应，旧请求的结果根本到不了这里
      this.latestResponse = response;
    });
  }

  // 触发新请求的方法（比如按钮点击、输入框变化时调用）
  triggerNewRequest(param: string): void {
    this.requestTrigger$.next(param);
  }

  ngOnDestroy(): void {
    // 发送销毁信号，取消所有订阅
    this.destroy$.next();
    this.destroy$.complete();
    this.requestTrigger$.complete();
  }
}

为什么这个方案有效？ #

当你调用triggerNewRequest发起请求#2时，switchMap会立刻取消请求#1对应的HTTP Observable订阅。哪怕之后请求#1的响应回来了，因为订阅已经被取消，它的结果不会进入subscribe回调，自然不会覆盖请求#2的结果。

备选方案（手动管理订阅） #

如果你不想用Subject+switchMap的组合，也可以手动存储当前请求的订阅，每次发起新请求前先取消旧的：

import { Subscription } from 'rxjs';

// 组件内定义变量存储当前订阅
private currentRequestSub: Subscription | null = null;

triggerNewRequest(param: string): void {
  // 先取消之前的请求订阅
  this.currentRequestSub?.unsubscribe();
  // 发起新请求并存储订阅
  this.currentRequestSub = this.http.get(`/api/your-endpoint?param=${param}`).subscribe(response => {
    this.latestResponse = response;
  });
}

不过这种方式比较繁琐，尤其是有频繁触发的请求（比如搜索输入）时，很容易漏写取消逻辑，还是推荐用switchMap的方案更优雅可靠。

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