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