Angular中exhaustMap仅调用一次Service，后续next无响应问题排查

核心问题原因 #

你的代码里有两个关键操作符导致后续请求无法触发：

1. exhaustMap的阻塞特性：
   exhaustMap会在当前HTTP请求未完成时，直接忽略新的事件。如果你的后端API响应较慢，或者网络存在延迟，用户后续输入触发的next()会被直接丢弃，不会发起新的getSubtree调用。

2. distinctUntilChanged()的重复值过滤：
   这个操作符会过滤掉与前一次完全相同的输入值。比如用户先输入test（和初始值一致），或者输入后又删除回之前的内容，这类重复值会被直接过滤，不会进入后续的服务调用逻辑。

修复方案 #

根据你的业务需求选择对应方案：

方案1：允许取消未完成的请求，优先处理最新输入（最常用场景）

把exhaustMap替换为switchMap，它会自动取消未完成的前序请求，转而处理最新的输入：

ngOnInit() {
  this.searchPathSubject$.pipe(
    distinctUntilChanged(),
    switchMap((path: string) => {
        return this.nodeService.getSubtree(path)
    })
  ).subscribe({ 
    next: (value) => this.subtreeData = value, 
    error: (err) => { console.log(err) } 
  });
}

方案2：允许同时处理多个请求（不推荐搜索场景）

如果需要保留所有请求（即使有重叠），可以换成mergeMap：

ngOnInit() {
  this.searchPathSubject$.pipe(
    distinctUntilChanged(),
    mergeMap((path: string) => {
        return this.nodeService.getSubtree(path)
    })
  ).subscribe({ 
    next: (value) => this.subtreeData = value, 
    error: (err) => { console.log(err) } 
  });
}

方案3：需要重复值也触发请求

如果希望即使输入和上次相同，也能重新发起请求，直接移除distinctUntilChanged()操作符即可：

ngOnInit() {
  this.searchPathSubject$.pipe(
    exhaustMap((path: string) => {
        return this.nodeService.getSubtree(path)
    })
  ).subscribe({ 
    next: (value) => this.subtreeData = value, 
    error: (err) => { console.log(err) } 
  });
}

额外建议 #

可以在组件中添加一个loading状态，避免用户重复输入时产生困惑：

// component.ts中添加loading状态
isLoading = false;

ngOnInit() {
  this.searchPathSubject$.pipe(
    distinctUntilChanged(),
    tap(() => this.isLoading = true),
    switchMap((path: string) => {
        return this.nodeService.getSubtree(path)
    }),
    tap(() => this.isLoading = false)
  ).subscribe({ 
    next: (value) => this.subtreeData = value, 
    error: (err) => { 
      console.log(err);
      this.isLoading = false;
    } 
  });
}

然后在模板中添加loading提示：

<input id="nodePath" type="text" [(ngModel)]="searchPath" (ngModelChange)="searchPathSubject$.next($event)" [disabled]="isLoading" />
<div *ngIf="isLoading">加载中...</div>

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