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

Question

I've got an Angular 6 application that allows the user to load different trees of information from a MySQL database. Basically, there are several buttons on the UI which call the following method when the user clicks them:

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)
        );
}

Sometimes the connection is quite slow (we have to test the application over a GPRS connection) and loading one tree can take 5-8 seconds. I've realized that, if the user clicks on another button before the preceding call ends, the application makes another one, and the returned data is mixed.

An easy solution is to block the UI until the call has finished, but I'm wondering if there's a way of cancelling the ongoing call and start a new one in this case. Any suggestions?

Thanks!

Answer 1

Simply unsubscribe to the request after a certain amount of time

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

req.unsubscribe();