如何正确使用RxJS tap操作符处理错误并完成回调逻辑

问题根因 #

你的代码存在3个核心API认知错误，导致无请求错误时error回调仍被触发：

• tap 接收的观察者参数仅支持 next、error、complete 三个回调，不存在finalize字段，你写在tap参数里的finalize回调会被直接忽略，永远不会执行。
• 无论是tap的complete回调，还是独立的finalize操作符，触发时都不会接收流内的业务数据作为入参。你给finalize写的data:UserProps[]形参永远是undefined，后续用这个undefined更新状态时会触发同步错误，该错误会被RxJS捕获判定为流错误，直接触发error回调。
• tap是纯副作用操作符，它的error回调仅负责执行错误场景的副作用，不会吞掉错误，错误会继续向下游传递。

正确代码示例 #

业务数据的处理和成功状态更新直接在next回调里完成即可，不需要等流完成的回调：

readonly fetchUsers$ = this.effect(($) =>
  $.pipe(
    tap(() => this.setState({ users: [], status: 'authenticating' })),
    switchMap(() =>
      this.dataService.getUsers().pipe(
        tap({
          next: (data: UserProps[]) => {
            this.setUsers(data);
            this.setState({ status: 'complete' });
          },
          error: () => this.setState({ users: [], status: 'error' }),
        }),
        // 如果需要做不区分成功/失败的通用收尾（比如关闭全局loading），用独立的finalize操作符
        // finalize(() => this.setGlobalLoading(false)),
        catchError(() => EMPTY)
      )
    )
  )
);

tap 正确使用规则 #

• 仅用tap执行不修改流数据的副作用：比如打日志、触发UI提示、更新局部状态，不要在tap里做流转换、错误捕获逻辑。
• 给tap传观察者对象时，仅使用next/error/complete三个字段，不要混入其他操作符的配置。
• 所有依赖流返回业务数据的逻辑，全部放在next回调里处理，不要在complete/finalize回调里尝试获取业务数据。
• 流终止后的通用收尾逻辑（不区分成功失败），使用独立的finalize操作符实现，不要写在tap参数内。

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