我创建了一个分页组件，包括页码两侧的上一个和下一个按钮。
每次他们按下分页组件上的按钮（例如，可用的页码、下一个或上一个）时，我都会在我的服务中订阅一个函数，该函数会向 API 发出 GET 请求。
这按预期工作，但是如果用户按任何按钮发送垃圾邮件，它会多次点击 API。考虑到订阅 HTTP 请求是一个异步函数，返回的数据可能不是该人请求的最新数据。
基本上，如果用户点击按钮 6 次，但请求 5 检索数据的时间可能比请求 6 长，因此在填充我的对象时，它会被请求 5 的数据覆盖，这并不理想。
我可以在等待请求时禁用分页，但这可能会在其他时间出现，我想为这种必然性做好准备。
处理这个问题的最佳方法是什么？
【问题讨论】：
标签： angular rxjs angular-http angular-httpclient
听起来你需要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));
}
它的作用是订阅按钮点击。一旦它收到第一次按钮点击，它就会调用服务器以获取在按钮点击中传递的页码数据。但是，如果用户在请求完成之前一直按下按钮，则先前的请求被取消，并为最近一次点击中传递的页码发出新的请求。如果这不是您要找的，请告诉我。
【讨论】：
我认为这样的事情可以解决你的问题：
为每个寻呼按钮分配相同的类。喜欢page-btn
在您的组件中，在调用 http 方法之前，您可以禁用上述类的每个按钮。（您可以使用 angular ElementRef 或其他类来实现。）
在订阅方法中，您可以重新启用分页按钮。 （这意味着在完成http请求并更新ui数据之后）
使用这种方法，用户在数据请求未决时不能点击任何分页按钮。
【讨论】：