如何使用switchMap解决嵌套Observable场景下首次返回undefined问题

问题根因 #

你原有代码的核心问题是异步时序错误：this.reservation.fetchReservations() 是异步Observable，你直接调用subscribe之后立刻同步返回了of(this.filteredReservations)，此时异步回调还未执行，filteredReservations还未赋值，所以首次调用必然拿到undefined。

修复方案 #

我们不需要在方法内部提前订阅内层Observable，而是通过RxJS管道操作符串联数据处理逻辑，让外层Observable等待所有逻辑执行完成后再返回结果。如果需要支持多次调用时自动取消上一次未完成的请求，就可以用你提到的switchMap。

首先导入需要的依赖：

import { switchMap, of, map } from 'rxjs';

修改后的服务方法代码：

fetchFilteredReservations(filterBy: any, search: any): Observable<any> {
  return this.reservation.fetchReservations().pipe(
    // 仅做数据转换用map即可，写法更简洁
    map((data: any) => {
      const data1 = this.loopData(data)
      const data2 = this.switchData(data1, filterBy, search)
      this.filteredReservations = data2
      return data2
    })
    // 如果要使用switchMap（适合多次调用需取消旧请求的场景），替换上面的map即可：
    // switchMap((data: any) => {
    //   const data1 = this.loopData(data)
    //   const data2 = this.switchData(data1, filterBy, search)
    //   this.filteredReservations = data2
    //   return of(data2)
    // })
  )
}

调用注意事项 #

方法改造后，不要在服务内部订阅，由调用方订阅返回的Observable即可拿到处理完成的最终数据：

// 调用示例
this.你的服务实例.fetchFilteredReservations(筛选参数, 搜索参数).subscribe(filteredData => {
  // 此处filteredData就是处理完成的最终结果
})

额外优化建议 #

• loopData方法里的日期切片逻辑建议加空值判断，避免原始createdDate格式异常时出现切片越界报错
• switchData方法建议补充default分支，避免匹配不到filterBy枚举值时返回undefined

内容的提问来源于stack exchange，提问作者Tamás Köböl