0

I have a screen with a left side list having different links and right side showing details of each. I am using below service to get the details.

getDetails(id: string) : Observable<any>{
    const url = `${environment.server}/api/details/${id}`
    return Observable.of(1)
        .debounceTime(2000)
        .switchMap(() => this.http.get(url))
        .map(r => r.json())
}
  1. Is it a good approach to use Observable.of(1) where 1 has no significance? Is there a different approach?
  2. Is this how we prevent multiple clicks/request for details and reply only to the latest one?
  3. In this case how do I catch the errors in http?
sabithpocker
  • 15,274
  • 1
  • 42
  • 75

1 Answers1

0

What is your final goal here? Regarding

1) I would simply do it like this: this.http.get(url).map(res => res.json()),

2) well, depends on your implementation, but in general i would just set a boolean flag to avoid multiple requests like so:

return new Observable(done => {
   if (!this.myQueryIsRunning) {
      this.myQueryIsRunning = true;
      this.http.get(url).map(res => res.json()).subscribe(myData=> {
        this.myQueryIsRunning = false;
        done.next(data); 
        done.complete();  
      })
   } else {
      done.complete();  // or throw an error like done.error('my error');
   }

3) not sure what you mean. You could always catch an error like so: 

this.http.get(url).map(res => res.json()).subscribe(myData=> {
    this.myQueryIsRunning = false;
    done.next(data); 
    done.complete();  
 }, hereIsAnError => {
    // do something about it
 })
djnose
  • 917
  • 7
  • 19
  • The main thing I want is the previous http calls should be cancelled as soon as a new request is made, it shouldnt continue procesing last call after a new call is made. – sabithpocker Oct 20 '17 at 12:43
  • you might want to check this out: [link](https://stackoverflow.com/questions/36490926/how-to-cancel-a-httprequest-in-angular-2) but honestly i would still try to find a way of avoiding that. When you cancel / unsubscribe a request, it does not mean that the server stops doing anything. On the serverside the request will be processed as usual. To avoid overloading the server with useless requests, you might want to reconsider :) jm2c – djnose Oct 22 '17 at 04:02
  • @djnjsone Thank you for your followup. I am understanding this slowly and eneded up doing unsubscribe to cancel previous requests. But as you mentioned is there any way we can avoid overloading the server with useless requests? – sabithpocker Oct 23 '17 at 08:44
  • Well yes, if you do it like described in my answer at point 2,you should be fine. Basically you do not fire a new request until the first one is finished. You could even show a loading gif or something like that. – djnose Oct 23 '17 at 09:14
  • Ok, got it. So we can 1. cancel request from client by unsubscribing but server still processes all of them, 2. process requests only one after the other to avoid load in server, but client will have to wait. My current setup blocks user-interaction until previous request is completed, I'm looking into some way to get rid of it and still run the app smoothly by invalidating previous requests which now looks either not possible or should be implemented in server? – sabithpocker Oct 23 '17 at 09:33
  • I cannot really answer that since I do not have enough knowledge about your software, but the nice (and evil) part about the asynchronous calls is that you do not have to block everything in your ui. You can fire your request and angular does the rest for you, as soon as your server answers, your application will be updated. In case you have different requests, you can theoretically fire them all at once...so it's kind of a mixture between 1 and 2 depending on your layout – djnose Oct 23 '17 at 10:42