如何在动态更新的搜索栏发起新请求时取消旧请求？

这个问题是典型的HTTP请求竞态条件：当你连续输入字符时，每个字符都会发起一个新请求，但网络请求的完成顺序不一定和发起顺序一致——比如你输入12345，最后发起的请求（对应12345）可能因为网络延迟，比之前的1234、123请求晚返回，导致最新的结果被旧请求的结果覆盖。

下面给你两种可行的解决方案，都是基于RxJS的特性来处理这个问题：

方案1：手动管理订阅，取消旧请求 #

通过Subscription对象跟踪每次的搜索请求，每次发起新搜索前取消上一次的订阅，确保只有最新请求的结果会更新页面数据：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { Events } from './your-event-type'; // 替换成你的Events类型路径
import { EventService } from './your-event-service'; // 替换成你的EventService路径

export class SearchComponent implements OnInit, OnDestroy {
  events: Events[] = [];
  triggered = false;
  private searchSubscription?: Subscription; // 用于跟踪搜索请求的订阅

  constructor(private eventService: EventService) { }

  ngOnInit() { }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.searchSubscription?.unsubscribe();
  }

  searchForEvents(searchTerm: string) {
    // 先取消上一次的搜索订阅，阻止旧请求的结果更新数据
    this.searchSubscription?.unsubscribe();
    
    // 发起新请求并保存订阅
    this.searchSubscription = this.eventService.getEventsByPartialId(searchTerm)
      .subscribe(data => {
        this.events = data;
        this.triggered = true;
      });
  }
}

方案2：用switchMap自动取消旧请求（更推荐的RxJS风格） #

如果你的搜索栏是用Angular表单控件（比如FormControl）绑定的，使用switchMap操作符是更优雅的方案——它会自动取消之前的请求订阅，只保留最新的请求结果：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { switchMap, debounceTime, startWith } from 'rxjs/operators';
import { Events } from './your-event-type';
import { EventService } from './your-event-service';

export class SearchComponent implements OnInit {
  events$: Observable<Events[]>; // 用Observable配合async管道管理数据
  searchControl = new FormControl(''); // 绑定到搜索输入框的表单控件

  constructor(private eventService: EventService) { }

  ngOnInit() {
    this.events$ = this.searchControl.valueChanges.pipe(
      debounceTime(300), // 可选：延迟300ms发起请求，减少频繁输入时的请求次数
      switchMap(searchTerm => {
        // switchMap会自动取消之前的请求，只处理最新的搜索词请求
        return this.eventService.getEventsByPartialId(searchTerm);
      }),
      startWith([]) // 初始显示空数组
    );
  }
}

对应的模板可以用async管道自动处理订阅（无需手动取消，避免内存泄漏）：

<input type="text" [formControl]="searchControl" placeholder="输入ID搜索">

<div *ngFor="let event of events$ | async">
  <!-- 渲染事件内容 -->
  {{ event.id }} - {{ event.name }}
</div>

为什么这些方案有效？ #

• 方案1通过手动取消旧订阅，确保只有最新的请求结果能更新this.events；
• 方案2的switchMap是RxJS专门解决这类竞态问题的操作符，当新的搜索词到来时，它会立即取消之前未完成的请求订阅，只处理当前最新的请求。加上debounceTime还能优化性能，避免用户快速输入时发起过多无效请求。

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