TypeScript、RxJS 中 SwitchMap 与 Tap 操作符的正确协作使用

2024-03-16 10:21:01

TypeScript、RxJS 中 SwitchMap 与 Tap 操作符的协同使用

在 TypeScript 和 RxJS 中，switchMap 和 tap 操作符经常结合使用，用于处理异步数据流和执行副作用操作。然而，有时 tap 操作符可能不会按预期执行，导致无法在关键操作后执行后续逻辑。

问题概述

当 tap 操作符放置在 switchMap 操作符之后时，tap 函数可能会失效。这是因为 switchMap 创建了一个新的 Observable，该 Observable 将上一个 Observable 的每个值转换为一个新的 Observable。tap 操作符应用于 switchMap 返回的 Observable，而不是上一个 Observable。

解决方案

为了解决这个问题，需要将 tap 操作符应用于 switchMap 返回的 Observable 之前。以下代码示例演示了正确的用法：

this.userDataService.setUsersData().pipe(
  take(1),
  switchMap(() => {
    if (name !== undefined) {
      return this.userDataService.addNewUser(resData.email, resData.localId, name).pipe(
        tap(() => {
          console.log('New User created');
        })
      );
    } else {
      console.log('Name is undefined. Skipping user creation.');
      return of();
    }
  }),
  tap(() => {
    console.log('data setted');
    this.isLoading = false;
    this.router.navigate(['/microblog']);
  })
).subscribe();

详细说明

switchMap 操作符接收一个 Observable 并返回一个新的 Observable。在这个例子中，switchMap 将 setUsersData Observable 的每个值转换为一个新的 Observable，用于创建新用户。
tap 操作符应用于 switchMap 返回的 Observable。tap 函数可以在不影响流的值的情况下对流经 Observable 的值执行副作用操作。在这个例子中，tap 函数在创建新用户后打印消息。
第二个 tap 操作符应用于 switchMap 返回的 Observable 之后。这个 tap 函数在创建新用户或跳过用户创建后执行逻辑，例如设置数据和更新用户界面。

结论

通过将 tap 操作符放在 switchMap 返回的 Observable 之前，我们可以确保 tap 函数按预期执行，从而实现所需的副作用操作。这种组合技术在处理异步数据流和在操作完成后执行后续逻辑时非常有用。

常见问题解答

为什么 ** tap 操作符不会在 ** switchMap** 之后执行？**
因为它应用于 switchMap 返回的 Observable，而不是上一个 Observable。
如何解决这个问题？
将 tap 操作符放在 switchMap 返回的 Observable 之前。
为什么第二个 ** tap 操作符在 ** switchMap** 之后执行？**
因为它是应用于 switchMap 返回的 Observable 之后。
这种组合技术有什么用途？
它用于处理异步数据流并在操作完成后执行后续逻辑。
还有其他与 ** switchMap 和 ** tap** 类似的操作符吗？**
是的，还有 exhaustMap 和 finalize 操作符。