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

Question

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

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

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

我尝试使用RxJS做到这一点，但是我只能通过使用interval来做到这一点，因此，如果interval是600 ms，并且用户每1000ms单击一次，则所有请求都将发送到服务器。这是我的代码：

 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 ...
     });