angular - 如何仅在第一个请求完成时触发新的 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 ...
     });