Angular - 重复相同的订阅HTTP请求

Question

我创建了一个分页组件，包括页码两侧的上一个和下一个按钮。

每次他们按下分页组件上的按钮（例如，可用页码，下一个或上一个）时，我订阅了我的服务中的一个函数，该函数向API发出GET请求。

这可以按预期工作，但是如果用户按垃圾邮件按任何按钮，它会多次点击API。考虑到订阅HTTP请求是异步函数，返回的数据可能不是该请求者的最新数据。

基本上，如果用户按下按钮6次，但是请求5可能花费更长的时间来检索数据然后请求6，所以当填充我的对象时，它会被请求5的数据覆盖，这是不理想的。

我可以在等待请求的同时禁用分页，但是这可能会在另一个时间出现，我想为这个必然性做好准备。

处理这个问题的最佳方法是什么？

Answer 1

我认为这样的事情可以解决你的问题：

1. 为每个分页按钮分配相同的类。像page-btn
2. 在组件中，在调用http方法之前，可以禁用上面的类的每个按钮。 （你可以用角度ElementRefor其他类来做。）
3. 在订阅方法中，您可以重新启用分页按钮。 （这意味着在完成http请求并更新ui数据之后）

使用此方法，用户无法在数据请求待处理时单击任何分页按钮。

Answer 2

听起来你需要switchMap() rxjs运算符。由于你还没有发布任何代码，我可以给你一些伪代码来开始。

首先，将#引用设置为在分页中执行下一行/后退导航的按钮。如在

<button (click)="doPaginationStuff()" #backButton></button>

然后，在组件类中声明一个@ViewChild()属性。如在

@ViewChild('backButton') buttonRef: ElementRef;

然后，在ngOnInit（）方法上，您可以订阅按钮的点击事件。如在

ngOnInit() {
  fromEvent(this.buttonRef.nativeElement, 'click')
     .pipe(switchMap(() => this.http.get('whatever page number'))
     .subscribe(console.log));
}

它的作用是，它订阅按钮点击。一旦收到第一个按钮单击，它就会调用服务器来获取按钮单击中传递的页码的数据。但是，如果用户在请求完成之前一直按下按钮，则取消先前的请求，并对最近点击中传递的页码发出新请求。如果这不是你想要的，请告诉我。