angular - RxJS 根据请求时间更改加载指示消息

Question

我想使用 RxJS 实现加载指示(微调器和下面的消息)。

从 0 到 30 秒，消息将是“正在处理您的请求...”

30 秒后 - 消息将是“您的请求正在处理中......，通常需要不到一分钟”。

如果数据早于 30 秒成功到达，则带有消息的加载器将消失。

我正在 Angular 项目中实现这个。
下面的代码是一种草稿版本，它没有按预期工作，因为api数据等待计时器完成

  public initializeDashboard() {
    const timerMessage$ = timer(30000, 1000).pipe(take(1));
    const dashboard$: Array<any> = this.headerService.getItems();

    this.progressMessage = 'Your request is being processed...';
    merge(timerMessage$, dashboard$).pipe(
      tap((item) => {
        if (isNumber(item)) {
          this.progressMessage = 'Usually it takes less then a minute';
        }
      }),
      filter(item => isArray(item)))
      .subscribe(
        (responseData) => {
            this.progressMessage = '';
             this.responseData = responseData,
          }
      );
  }

Answer 1

这里的技巧是我将合并两个链，其中第一个只会产生副作用并更新消息，而第二个是使用 take(1) 的链。可以完成链条。这是必要的，因为您显然希望在以下情况下取消计时器dashboard$发出。

我认为还有另一种没有 ignoreElements() 的变体但这也需要 takeUntil()和 share()并进行两个单独的订阅，所以我认为这是更容易的一个。

public initializeDashboard() {
  const dashboard$: Array<any> = this.headerService.getItems();
  const timerMessage$ = timer(30 * 1000) // This will emit just once after 30s
    .pipe(
      tap(() => this.progressMessage += 'Usually it takes less then a minute'),
      ignoreElements(), // all emission will be ignored so they won't reach `take(1)` and complete the chain
    ); 

  this.progressMessage = 'Your request is being processed...';

  merge(timerMessage$, dashboard$)
    .pipe(
      take(1), // This is required so when `dashboard$` emits it will unsubscribe from `timerMessage$` automatically
    )
    .subscribe((responseData) => {
      this.progressMessage = '';
      this.responseData = responseData,
    });
}