Angular 4. A series of http requests get cancelled

Question

When I try to make multiple http requests via http service in Angular 4, previous request get cancelled in Chrome (but they reach the server). Example:

const obs1 = this.http.get(`${API_URL}/transitions`); const obs2 = this.http.get(`${API_URL}/states`); obs1.subscribe();   obs2.subscribe(); // this will cancel obs1's http request 

But if I replace .subscribe() to .publish().connect() like above, it will work correctly (no cancels)

const obs1 = this.http.get(`${API_URL}/transitions`); const obs2 = this.http.get(`${API_URL}/states`); obs1.publish().connect(); obs2.publish().connect(); 

Or if I merge two Observables to one and then get subscribed like above, it will work correctly too

const obs1 = this.http.get(`${API_URL}/transitions`); const obs2 = this.http.get(`${API_URL}/states`); Observable.merge(obs1, obs2).subscribe() 

Why do I face this behavior? I need to understand, not bypass. How can I make series of requests without merging, forking etc.?

Answer 1

This has to do with observables being cancelled, although I must admit I don't know the root cause for the problem you face.

I ran into a similar problem using the ngrx/effects module. The action handler made requests to a service using ngrx switch map operator. All except the last request would get cancelled. Changing it to merge map fixed the problem. Below is the code

@Effect()     loadSomeData$: Observable<Action> = this.actions$             .ofType(SomeActions.Load_Data)             .mergeMap((id) =>                     this.someService.getSomething(id)                             .map((someEntity) => new SomeActions.LoadDataSuccess(someEntity)                             ).catch((x, y) => {                                     console.error('Error occured');                                     return Observable.of(new SomeActions.LoadDataFailed(id));                             }                             )); 

Reproducing the relevant part of ngrx here.

https://www.learnrxjs.io/operators/transformation/switchmap.html

The main difference between switchMap and other flattening operators is the cancelling effect. On each emission the previous inner observable (the result of the function you supplied) is cancelled and the new observable is subscribed. You can remember this by the phrase switch to a new observable.

Answer 2

For me the problem was because of an empty observable. I was using Observable.forkJoin on a list of observables.

SOLUTION: I needed to give my Observable.of() a value: Observable.of(null)