angular - 动态改变轮询间隔

Question

我需要我的前端应用程序轮询我的后端应用程序并刷新显示的数据。我通过某种方式解决了它，但我感觉它可以优化。这是我的解决方案:

        this.pollDataSource$ = new BehaviorSubject<number>(this.pollingInterval);

        this.pollDataSource$
            .pipe(
                switchMap(duration =>
                    of(duration)
                        .pipe(
                            filter(duration => duration !== 0),
                            delay(duration),
                            concatMap(() => this.kubernetesObjectList$)
                        )
                )
            )
            .subscribe({
                next: (kubernetesObjectList) => {
                    this.dataSource.data = kubernetesObjectList;
                    if (this.pollingInterval > 0) {
                        this.pollDataSource$.next(this.pollingInterval);
                    }
                }
            });

        this.pollDataSource$.next(-1);

所以，我有一个下拉选择器，它会影响 this.pollingInterval .另外，我还有 this.pollDataSource$这是一个 BehaviorSubject<number> .它发出 number这被用作下一次轮询之前的持续时间。

当 this.pollDataSource$发出 -1 (当用户单击“刷新”按钮时会发生这种情况)，必须立即轮询数据源，而不管设置的轮询间隔是多少。

当 this.pollDataSource$发出一些正数(当用户从​​下拉选择器中选择某个轮询间隔时会发生这种情况)，这个数字必须用作下一次刷新之前的持续时间。

当 this.pollDataSource$发出 0 (当用户在同一下拉选择器中选择停止轮询选项时会发生这种情况)，我们必须停止轮询，直到用户选择新的轮询间隔。

一切都完美无缺。页面加载完毕， this.pollingInterval有 10000默认情况下，用户会立即获取数据，但会在 10 秒后更新。当用户点击刷新时，数据正在更新，下一次自动刷新在 10 秒后发生。当用户切换到停止轮询时，数据保持静止。当用户切换到另一个间隔时，数据将再次更新。一切都很棒!但我有一种感觉，我的解决方案不是最佳的。我只是不喜欢这种结构: ...pipe...switchMap...of...pipe...有没有办法简化它？

提前感谢所有线索。

Answer 1

我提到的原因 expand是这个运算符可以用来代替构造

someSubject.pipe(
  // do stuff
).subscribe(
  next: data => {
    // do some more stuff
    someSubject.next(something)
  }

这是您实际使用的构造，因此有关 expand 的建议.

然后，回到你的问题而不介绍 expand ，你可能会考虑的是

this.pollDataSource$
        .pipe(
            switchMap(duration =>
                return duration === 0 ?
                  NEVER :
                  this.kubernetesObjectList$.pipe(delay(duration));
            )
        )
        .subscribe({
            next: (kubernetesObjectList) => {
                this.dataSource.data = kubernetesObjectList;
                if (this.pollingInterval > 0) {
                    this.pollDataSource$.next(this.pollingInterval);
                }
            }
        });

    this.pollDataSource$.next(-1);

与 expand它可能看起来像

this.pollDataSource$
            .pipe(
                expand(duration =>
                    return duration === 0 ?
                      NEVER :
                      this.kubernetesObjectList$.pipe(
                         delay(duration),
                         map(() =>  duration)
                      );
                )
            )
            .subscribe({
                next: (kubernetesObjectList) => {
                    this.dataSource.data = kubernetesObjectList;
                }
            });

        this.pollDataSource$.next(-1);

这些版本的代码是否比我认为清晰易读的原始版本更清晰，这可能是个人喜好的问题。

我使用的所有“可能”和“将要”都是因为我没有可以测试此代码的操场，因此您很可能会发现某些东西在这里不起作用。