subscribe回调中flat函数无意义多次执行该如何解决

解决方案 #

你遇到的flat多次执行问题核心是订阅的Observable推送了多次包含无效值的结果，可按以下方案处理：

• 方案1：订阅回调内加有效值校验
  无需修改数据流，直接在回调内判断返回值是否符合有效规则，不符合则跳过执行：

  this.service.function().subscribe((data: any) => {
    // 可根据业务需求调整判断条件
    if (data && Array.isArray(data)) {
      this.array = data
      this.flat(this.array)
    }
  })
  

• 方案2：使用RxJS filter 操作符前置过滤（更推荐）
  在数据流进入订阅前就过滤掉无效值，逻辑拆分更清晰，符合响应式编程规范：
  首先导入filter操作符：
  import { filter } from 'rxjs/operators'
  调整订阅逻辑：

  this.service.function()
    .pipe(
      // 过滤规则按需调整
      filter((data: any) => data && Array.isArray(data))
    )
    .subscribe((data: any) => {
      this.array = data
      this.flat(this.array)
    })
  

• 方案3：新增订阅销毁逻辑避免重复触发
  如果多次执行是组件多次挂载未销毁旧订阅导致的，需要新增销毁逻辑，同时避免内存泄漏：
  首先导入依赖：

  import { filter, takeUntil } from 'rxjs/operators'
  import { Subject } from 'rxjs'
  

  组件内定义销毁触发器并在生命周期中处理：

  private destroy$ = new Subject<void>()
  
  ngOnDestroy() {
    this.destroy$.next()
    this.destroy$.complete()
  }
  

  调整订阅逻辑：

  this.service.function()
    .pipe(
      filter((data: any) => data && Array.isArray(data)),
      takeUntil(this.destroy$)
    )
    .subscribe((data: any) => {
      this.array = data
      this.flat(this.array)
    })
  

以上判断规则可根据业务实际需求调整，比如需要数组非空可以加上data.length > 0的判断条件。

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