Rxjs - 将 EMPTY 与 Finalize 结合使用

Question

以下代码为例：

const subject$ = new Subject();

subject$
  .pipe(
    tap(() => console.log('tap1')),
    switchMap(() => EMPTY),
    tap(() => console.log('tap2')),
    finalize(() => console.log('finalize')),
  ).subscribe();

subject$.next(null);

我想要实现的是以下输出：

Expected Output:
tap1
finalize

Actual Output:
tap1

阅读每个操作员所做的事情，它应该按预期工作，但事实并非如此。

我的思考过程是：

1. 我有一个发出值的主题
2. 我将可观察值切换到一个新的，在本例中为空
3. 由于 EMPTY 根据文档发出完整的通知，而不发出项目，因此我预计

   tap2

   不会被记录，并且

   finalize

   会被记录，因为链式可观察已经完成。

我显然没搞对。谁能帮助我了解流程以及如何使其满足我的需要？

Answer 1

空完成你是对的，但这只会完成流，当

EMPTY

是流的开始时！

EMPTY.pipe(finalize(() => console.log('finalize'))).subscribe({
  next: () => console.log('Next'),
  complete: () => console.log('Complete!'),
});

// will output
// Complete!
// finalize

但是我们的流的开始是

subject$

，它尚未完成，并将继续接收事件，即使流的中间在

EMPTY

中途停止，所以源需要完成，然后你将得到最终确定并完成区块触发！

import './style.css';

import { Subject, switchMap, tap, finalize, EMPTY } from 'rxjs';

const subject$ = new Subject();

subject$
  .pipe(
    tap(() => console.log('tap1')),
    switchMap(() => EMPTY),
    tap(() => console.log('tap2')),
    finalize(() => console.log('finalize'))
  )
  .subscribe({
    next: () => console.log('next'),
    error: () => console.log('error'),
    complete: () => console.log('complete'),
  });
// emits tap1
// output:
// tap1
subject$.next(null);
// emits tap 1 again eventhough empty was returned
// output:
// tap1
subject$.next(null);
// will complete the observable and give the output
// output:
// complete
// finalize

subject$.complete();

EMPTY.pipe(finalize(() => console.log('finalize'))).subscribe({
  next: () => console.log('Next'),
  complete: () => console.log('Complete!'),
});

// will output
// Complete!
// finalize

Stackblitz 演示