内有较长任务的角间隔管道答案

【问题标题】：Angular interval pipe with a longer task inside内有较长任务的角间隔管道
【发布时间】：2018-11-05 11:53:26
【问题描述】：

我的组件中有这段代码：

  ngOnInit() {
    ...
    this.counterValue$ = interval(1000).pipe(
      switchMap(() => this.perfService.getCounter(this.counterUrl)),
      map(i => this.updateChart(i)),
    );
    this.counterValue$.subscribe(v => console.log(v));
  }

我写这个是为了每 1 秒更新一次图表。问题是 perfService.getCounter() 需要超过 1 秒才能返回。这会导致以下 http 请求被取消：

如何解决这个问题？

【问题讨论】：

尝试使用mergeMap而不是switchMap

标签： angular rxjs

【解决方案1】：

如果您想在大多数请求花费超过 1 秒的情况下每 1 秒更新一次，那么适合您的运算符可能是 exhaustMap。

简短总结在这种情况下，其他*map 运算符之间有什么区别：

switchMap 将取消来自interval(1000) 的每次发射的挂起请求。
mergeMap 将为来自interval(1000) 的每个发射发出一个新请求，因此您将同时有许多待处理的请求，然后在它们到达时覆盖它们的响应
concatMap 将堆叠来自interval(1000) 的传入排放，然后在它们完成时执行它们，因此如果您有一段时间的响应非常慢，然后响应非常快，concatMap 将更频繁地发出请求然后在 1s 之后，因为它首先会清空它的内部缓冲区。
exhaustMap 将发出请求，然后忽略来自interval(1000) 的任何后续发射，直到其内部请求完成。不管需要多长时间。然后它会等待源 Observable 的另一个发射。因此，您可以保证至少有 1 秒的延迟，同时不会产生重叠的请求。

【讨论】：

谢谢 :) 这解释了很多

【解决方案2】：

如果有新的事件出现，SwitchMap 取消事件，你有没有尝试使用tap 操作符？

【讨论】：