RxJS中BehaviorSubject调用next()为何会触发pipe链内的API请求

问题核心逻辑解答 #

1. RxJS基础概念铺垫 #

你看到的$后缀的变量都是RxJS的流对象：

• _query$是BehaviorSubject类型，它既是可订阅的数据流（Observable），也可以主动调用next()方法推送新值（Observer）。
• pipe是RxJS的流处理组合工具，switchMap是RxJS的高阶映射操作符。

2. pipe的工作机制 #

pipe的作用是基于上游数据流，定义一套固定的转换规则，最终返回一个新的衍生数据流。
你可以通俗理解为：pipe里定义的所有操作符，就是上游每次推送新值时的执行逻辑，上游每调用一次next()传新值，新值就会完整走一遍pipe里的所有操作符处理流程。

3. _results$赋值的含义 #

这里给_results$赋值，本质是完成了「搜索输入 -> 搜索结果」的响应式绑定：

this._results$ = this._query$.pipe(
  switchMap((query) => {
    return observableFrom(this.api.search(query));
  })
);

上面这段代码的作用是：把_query$流出的每一个搜索词，都经过switchMap处理，转换成对应搜索词的API请求结果流，最终这个结果流就是_results$。

4. switchMap的作用，以及为什么调用next()会触发API #

switchMap的核心逻辑是：

• 接收到上游传来的新值时，立刻把这个值传入回调函数，返回一个新的Observable（这里就是API请求的Observable）
• 如果上一个值生成的Observable还没执行完（比如上一次搜索请求还没返回），会直接取消订阅上一个Observable，只保留最新的请求
  所以当你调用_query$.next(新搜索词)时：

1. 新搜索词从_query$流出，进入pipe
2. 触发switchMap执行回调，调用api.search(新搜索词)生成API请求流
3. 请求返回的结果就会从_results$流出，所有订阅了results$的组件就能拿到最新的搜索结果

5. 完整流程串讲 #

1. 输入框内容变化时，触发onChange调用setQuery更新本地query状态
2. query变化触发useEffect执行，调用searchBloc.query.next(query)给_query$推送新的搜索词
3. 新搜索词经过pipe和switchMap处理，触发对应API搜索
4. API返回的结果从_results$流出，完成搜索流程

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