rxjs switchMap 需要返回订阅的 observable

Question

这里是要求：

当点击开始按钮时，每 100 毫秒发出 x 次事件，每次发出对应一个 UI 更新。 x次emit完成后，会触发最后一次UI更新，看起来很简单吧？

这是我的代码：

const start$ = fromEvent(document.getElementById('start'), 'click')
const intervel$ = interval(100)
    .pipe(
        take(x),
        share()
    )
var startLight$ = start$
    .pipe(
        switchMap(() => {
            intervel$
                .pipe(last())
                .subscribe(() => {
                    // Update UI
                })
            return intervel$
        }),
        share()
    )
startLight$
    .subscribe(function (e) {
        //Update UI
    })

显然，在switchMap 内订阅是反模式，所以我尝试重构我的代码：

const startInterval$ = start$
    .pipe(
        switchMapTo(intervel$),
    )
startInterval$.pipe(last())
    .subscribe(() => {
        //NEVER Receive value
    })

const startLight$ = startInterval$.pipe(share()) 

问题是intervel$流是在switchMap里面产生的，外面不能访问，只能访问产生intervel$的流，即start$永远不会完成！

是否有更聪明的方法来处理此类问题，或者这是 rxjs 的固有限制？

Answer 1

你们很亲密。在 intervel$ 中使用 last() 仅将最后一个发送到下面的订阅。工作StackBlitz。以下是 StackBlitz 的详细信息：

const start$ = fromEvent(document.getElementById('start'), 'click');
const intervel$ = interval(100)
    .pipe(
        tap(() => console.log('update UI')), // Update UI here
        take(x),
        last()
    );

const startInterval$ = start$
    .pipe( switchMapTo(intervel$));

startInterval$
    .subscribe(() => {
        console.log('will run once');
    });

更新

如果你不想使用tap()，那么你可以简单地让start$ 完成，只取第一个发射，然后用take(1) 或first() 完成。 Here is a new StackBlitz 显示这个。

const start$ = fromEvent(document.getElementById('start'), 'click')
    .pipe(
      first()
    );
const intervel$ = interval(100)
    .pipe( 
      take(x) 
    );

const startInterval$ = start$
    .pipe( 
      switchMapTo(intervel$)
    );

startInterval$
    .subscribe(
      () => console.log('Update UI'),
      err => console.log('Error ', err),
      () => console.log('Run once at the end')
    );

这种方法（或任何完成 Observable 的方法）的缺点是一旦完成就不会被重用。因此，例如，在新的 StackBlitz 中多次单击按钮将不起作用。使用哪种方法（第一种可以反复点击或完成的方法）取决于您需要的结果。

另一种选择

创建两个intervel$ observable，一个用于中间 UI 更新，一个用于最后一个。将它们合并在一起，只在订阅中更新 UI。 StackBlitz 这个选项

代码：

const start$ = fromEvent(document.getElementById('start'), 'click')
const intervel1$ = interval(100)
    .pipe( 
      take(x)
    );
const intervel2$ = interval(100)
    .pipe(
      take(x+1),
      last(),
      mapTo('Final')
    );

const startInterval$ = start$
    .pipe( 
      switchMapTo(merge(intervel1$, intervel2$))
    );

startInterval$
    .subscribe(
        val => console.log('Update UI: ', val)
    );

一种更惯用的方式，与前一种逻辑相同（Guichi）

import { switchMapTo, tap, take, last, share, mapTo } from 'rxjs/operators';
import { fromEvent, interval, merge } from 'rxjs';

const x = 5;

const start$ = fromEvent(document.getElementById('start'), 'click');


const intervel$ = interval(100);

const intervel1$ = intervel$
  .pipe(
    take(x)
  );
const intervel2$ = intervel1$
  .pipe(
    last(),
    mapTo('Final')
  );

const startInterval$ = start$
  .pipe(
    switchMapTo(merge(intervel1$, intervel2$))
  );

startInterval$
  .subscribe(
    val => console.log('Update UI: ', val)
  );

反射

原始问题的关键问题是“以不同的方式使用相同的 observable”，即在进度和决赛期间。所以merge 是针对此类问题的一个相当不错的逻辑模式

Answer 2

把你的更新逻辑放在switchMap和tap()里面，tap会运行多次，subscribe()只会获取最后一次发射

const startInterval$ = start$
    .pipe(
        switchMap(()=>intervel$.pipe(tap(()=>//update UI),last()),
    )
startInterval$
    .subscribe(() => {
//    will run one time
    })