如何仅在第一个请求完成时触发新的 http 请求并忽略/取消其间的所有其他请求

Question

我正在使用 Angular2 制作 SPA 的前端，并且我有一个包含大量记录的数据库，并且数据库本身非常慢，因此需要 10000 条记录（或仅使用 ORDER BY 的最后 10 条记录）到 4-5 秒。在我的情况下，升级数据库不是一种选择。

所以我想要做的是：当用户多次点击分页器的“下一步”按钮（onNextClick 已被调用）时（假设他连续点击多达 100 次或更多），只有第一个 http 请求会发送到服务器/API。现在是我无法弄清楚的部分：

当第一个请求返回结果时，最后一个点击事件会触发一个新请求，忽略第一个和最后一个之间的所有其他点击请求（忽略应该是请求，而不是点击本身）。那么，如果用户仍在点击，则最后一次点击/请求将成为第一个，依此类推...

我尝试用 RxJS 做到这一点，但我只能通过使用间隔来做到这一点，所以如果间隔是 600 毫秒并且用户每 1000 毫秒点击一次，那么所有请求都会发送到服务器。这是我的代码：

 private clickStream = new Subject();

 ngOnInit() {
   this.clickStream
   .debounce(() => Observable.interval(600).take(1))
   .subscribe(
     params => {
       this.callHttpPostMethod();
     }
   );
 }

 onNextClick(event) {
     this.clickStream.next(event);
 }

欢迎任何 Angular2 解决方案 - 使用 RxJS 不是必需的。

Answer 1

您可以使用switchMap 取消正在进行的请求并确保只处理最新的请求：

this.clickStream
    .debounceTime(500)
    .switchMap(e=> this.callHttpPostMethod())
    .subscribe(t=> {
          ... do something ...
     });