如何在 Angular 6 上取消正在进行的 HttpClient 请求

Question

我有一个Angular 6应用程序，允许用户从MySQL数据库加载不同的信息树。基本上，UI 上有几个按钮，当用户单击它们时，它们会调用以下方法：

getTree(id : number) : Observable <any> {
let url = `${ConfigService.settings.appURL}/data-tree/${id}`;
return this.httpClient.get(url)
.pipe(
map(this.formatTreeData),
catchError(this.handleError)
);
}

有时连接速度很慢(我们必须通过GPRS连接测试应用程序(，加载一棵树可能需要5-8秒。我已经意识到，如果用户在前面的调用结束之前单击另一个按钮，应用程序会发出另一个按钮，并且返回的数据是混合的。

一个简单的解决方案是在调用完成之前阻止 UI，但我想知道在这种情况下是否有办法取消正在进行的调用并启动一个新调用。有什么建议吗？

谢谢！

Answer 1

只需在一定时间后取消订阅请求

let req = this.getTree().subscribe( ... your code)
req.unsubscribe();