Angular 4 execute requests sequentially, stop if one request fails

Question

I'm sorry to ask like this, but I'm pretty much an Angular noob and stuck with fixing someone else's code, who, I'm afraid, is not that experienced with Angular either.

Here is the code

const searchTermStream = this.searchTerm.valueChanges
  .debounceTime(400)
  .filter(query => query.length > 2 || query.length === 0)
  .do(query => this.adjustBrowserUrl(query))
  .distinctUntilChanged()
  .switchMap(query => this.itemService.findItems(query))
  .subscribe()
;

const paramsStream = this.route.queryParams
  .map(params => decodeURI(params['query'] || ''))
  .do(query => this.searchTerm.setValue(query))
  .distinctUntilChanged()
  .switchMap(query => this.itemService.findItems(query))
  .subscribe()
;

this.itemList$ = this.itemService.items$;

this.itemCount$ = this.itemService.countAllItems();

Apparently this code makes rest calls and retrieves items and itemCount from a backend and also filters if query is provided.

The problem is when the first call fails (session timeout) the other calls are still being executed and cause exceptions in the backend, the exceptions are handled properly, but the calls are still unwanted.

So I need to figure out now how to make the calls sequentially and stop the calls altogether if the first one fails (for whatever reasons). I've found some examples on the net and on here using promises and observables, but since I'm a noob I have a bit trouble making heads or tails of it and adapting those for my purposes.

Any help would be greatly appreciated.

I assume what you call the first call is this.itemService.items$, can you also add what it returns ? — Scipion, Jan 09 '18 at 09:17
it returns items$: Observable; as far as I can tell. There seems to be an awful lot of magic going on — Samarek, Jan 09 '18 at 09:21

score 1 · Accepted Answer · answered Jan 09 '18 at 09:27

1

You can try doing something like this :

this.itemList$ = this.itemService.items$;

this.itemList$.subscribe(() => {
   this.itemCount$ = this.itemService.countAllItems();
},
err => {...})

don't forget to clean the subscription in your ngOnDestroy afterwards (Angular/RxJs When should I unsubscribe from `Subscription`)

or if you do prefer working with promises :

 import "rxjs/add/operator/toPromise";


 this.itemList$ = this.itemService.items$;

    this.itemList$.toPromise().then(() => {
       this.itemCount$ = this.itemService.countAllItems();
    },
    err => {...})

answered Jan 09 '18 at 09:27

Scipion

11,449
19
74
139

well, it looks like progress, seems I triggered an infinite loop :D but progress. I guess one distinctUntilChange causes a refresh on the other one and then it goes nuts. But big thanks so far ;) – Samarek Jan 09 '18 at 10:51
I am afraid that without more information here, it's difficult to see why you are having an infinite loop – Scipion Jan 09 '18 at 11:18
hehe yep, I am trying to gather the information atm ;) edit: well, its definitely the distinctUntilChanged – Samarek Jan 09 '18 at 11:23
Does all this mean I have to store the subscription into a class field and then unsubscribe in ngOnDestroy ? ô_o – Samarek Jan 09 '18 at 12:09
That's what it seems, and yeah it is a bit of a hassle – Scipion Jan 09 '18 at 12:27
Doesn't work and I think the premise is wrong, since the request is completed, because the error is handled in an interceptor (taadaa). So I guess I kinda have to handle this in the interceptor, right ? – Samarek Jan 09 '18 at 15:25
hmm thx, well we solved it completely differently now, since nobody could figure it out :D – Samarek Jan 10 '18 at 08:25

Angular 4 execute requests sequentially, stop if one request fails

1 Answers1