Angular Promise - debounceTime behavior

Question

I'm using angular 7 and I've the following (working) code.

    import { Http } from '@angular/http';


    public httpService: Http;
    (....)

    public callAction(): Promise<void> {
        let r = this.httpService.post(url, panelData);

        return r.toPromise().then((response: { json: () => any; }) => {
            if (response.json()) {
                this.processResponse(panel, response.json());
            }
        }).catch((reason: any) => {
            throw reason;
        });
    }

The method this.httpService.post returns an Observable< Response >.

I'm trying to avoid multiple server calls and for that I'm trying to use the debounce behavior.

I added the debounceTime on my Observable but it doesn't work when the Promise is called.

let r = this.httpService.post(url, panelData).debounceTime(5000);
return r.toPromise().then()

I know that I'm not subscribing the Observable but when I call the toPromise() should this behavior be "imported" to the promise?

PS- I also try with a pipe

let r = this.httpService.post(url, panelData).pipe(debounceTime(5000));

you must use the debounce operator into a pipe() as described into your link. — Gérôme Grignon, Jan 03 '20 at 10:02
I tested with the pipe and it still not working -> let r = this.httpService.post(url, panelData).pipe(debounceTime(5000)); — JMarques, Jan 03 '20 at 10:04
https://stackoverflow.com/questions/44183519/cant-make-debouncetime-or-throttletime-to-work-on-an-angular-http-request — Indragith, Jan 03 '20 at 10:14
you should use `HttpClient` instead of deprecated `Http`. I think it may be the solution. Haven't worked with the latter, but with `HttpClient` I can pipe it — tiagomagalhaes, Jan 03 '20 at 10:34
Also you should reverse the operations. What you are debouncing is the response from the server — tiagomagalhaes, Jan 03 '20 at 10:37

score 2 · Answer 1 · answered Jan 03 '20 at 10:09

You need to have let r = this.httpService.post(url, panelData).debounceTime(5000); outside your callAction() function and instead sit as a separate function/property of the class. What is occurring is every time callAction() function is called a new debounce observable r is being created, instead you need to call the same one each time:

import { Http } from '@angular/http';


public httpService: Http;
(....)

let r = this.httpService.post(url, panelData).debounceTime(5000);

public callAction(): Promise<void> {
    return this.r.toPromise().then((response: { json: () => any; }) => {
        if (response.json()) {
            this.processResponse(panel, response.json());
        }
    }).catch((reason: any) => {
        throw reason;
    });
}

Angular Promise - debounceTime behavior

1 Answers1