Angular 2 Using Observable.debounce() with Http.get

Question

I understand that Observable.debounce() can be used to process rapid fire form input. As Http GET also returns an Observable, I wonder it it is possible to debounce rapid http requests? I tried debounceTime() but it did not appear to do anything.

public getStuff(p1, area:string, p2:string): Observable<number> { 
   return this.http.get(some_url) 
   .map(r => r.json()) 
   .debounceTime(10000) 
  .catch(this.handleError); 
};

Please add some code that demonstrates what you try to accomplish. — Günter Zöchbauer, Mar 14 '16 at 15:39
public getStuff(p1, area:string, p2:string): Observable { return this.http.get(`some_url`) .map(r => r.json()) .debounceTime(10000) .catch(this.handleError); }; — Joseph Genchik, Mar 14 '16 at 15:52
Please edit your question and add the code there. Code in comments is very hard to read. The `edit` link is below the `angular2 observable` tags below your question. — Günter Zöchbauer, Mar 14 '16 at 15:53
Sorry, I didn't think to update the question with a nicely formatted code sample. It is there now. — Joseph Genchik, Mar 14 '16 at 15:59

Thierry Templier · Answer 1 · 2016-03-14T18:41:18.137

The debounceTime allows to buffer events and only handle the last one after an amount of time.

It's useful in the context of inputs but it should be defined on the observable that triggers the event not on the one created for the HTTP request.

Here is a example on a control associated with an input that leverages the debounceTime operator:

@Component({
  (...)
  template: `
    <input [ngFormControl]="ctrl"/>
  `
})
export class MyComponent {
  constructor() {
    this.ctrl = new Control();
    this.ctrl.valueChanges
               .debounceTime(500)
               .distinctUntilChanged()
               .switchMap((value: string) => {
                 // Get data according to the filled value
                 return this.service.getData(entry);
               })
               .subscribe(data => {
                 // Update the linked list
                 this.list = data;
               });
  }
}

This article could also interest you:

https://jaxenter.com/reactive-programming-http-and-angular-2-124560.html (see section "Linking with user events")

Following the micronyks's comment, here is an additional link:

Everything is a stream: http://slides.com/robwormald/everything-is-a-stream (youtube: https://www.youtube.com/watch?v=UHI0AzD_WfY)

In modern Angular you would have to place `debounceTime` and other functions inside `pipe(..)` call. I.e. : `...valueChanges.pipe(debounceTime(500), distinctUntilChanged(), switchMap(..)).subscribe(..);` — kolobok, Sep 20 '21 at 17:25

A. Morel · Answer 2 · 2018-05-28T10:27:34.077

You have to transform from subject observable into an http observable with switchMap like this:

observableObj$: Observable<any>;
subjectObj = new Subject();

 ngOnInit() {
    this.observableObj$ = this.subjectObj.pipe(
      debounceTime(1000),
      switchMap(() => {
        ...
        return this.http.get(some_url).map(r => r.json());
      }),
    );

    this.observableObj$.subscribe((data) => {
      // result of http get...
      ...
    });
}

getStuff() {
    this.subjectObj.next();
}

score 4 · Answer 3 · answered Mar 03 '19 at 18:05

4

in Angular7:

import { Observable, of, timer } from 'rxjs';
import { catchError, retry, map, debounce } from 'rxjs/operators';

public getStuff(p1, area:string, p2:string): Observable<number> { 
   return this.http.get(some_url) 
   .pipe(
      debounce(() => timer(10000)),
      catchError(this.handleError)
   );
};

answered Mar 03 '19 at 18:05

Emir Mamashov

1,108
9
14

1

Thanks so much for the modern equivalent! – Alex Gurrola Aug 21 '20 at 19:11
2

I have tried, but this didn't work for me – Goutham Harshith Jun 01 '21 at 12:17
1

I'm not sure this will have the same positive effect as SwitchMap which will cancel an existing HTTP request. – Bluebaron Oct 13 '22 at 05:33

Angular 2 Using Observable.debounce() with Http.get

3 Answers3

Linked

Related