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

Question

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

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

这可以按预期工作，但是，如果用户要垃圾邮件，请按任意按钮，则将多次击中API。考虑到订阅HTTP请求是异步功能，因此返回的数据可能不是该人请求的最新数据。

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

我可以在等待请求时禁用分页，但是这可能会在另一个时间出现，因此我想为这种不可避免性做好准备。

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

Answer 1

我认为这样可以解决您的问题：

1. 为每个分页按钮分配相同的类。像page-btn

2. 在组件中，调用http方法之前，可以禁用具有上述类的每个按钮。（可以与angular ElementRef或其他类一起使用。）< / p>

3. 在subscription方法中，您可以重新启用分页按钮。 （这意味着在完成http请求并更新ui数据之后）

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

Answer 2

听起来像您需要opengl32.dll rxjs运算符。由于您尚未发布任何代码，因此我可以给您一些伪代码以开始使用。

首先，为在分页中进行下一个/后退导航的按钮设置switchMap()引用。如

#

然后，在组件类中声明一个<button (click)="doPaginationStuff()" #backButton></button> 属性。如

@ViewChild()

然后，在ngOnInit（）方法上说，您将单击事件订阅到按钮上。如

@ViewChild('backButton') buttonRef: ElementRef;

这是什么，它订阅按钮单击。收到第一次按钮单击后，它将调用服务器以获取按钮单击中传递的页码的数据。但是，如果用户在请求完成之前一直按下按钮，则先前的请求将被取消，并且将对最近一次点击中传递的页码进行新的请求。让我知道这是否不是您想要的。