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