如何在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();