[Fixed] Angular 4. A series of http requests get cancelled

Issue

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.?

Solution

I’ve found a potential reason of this behavior.

Thanks to https://github.com/ghetolay and https://github.com/dklmuc

We found out that angular will cancel very fast http requests which without any callback. So, you have to pass onNext in subscribe

From https://github.com/ghetolay:

ok it’s race condition I think

it will always call xhr.abort() on teardown

if the connection is still considered open by the browser it will close it, otherwise probably doing nothing

so when you have a very fast handling of the response (like no callback is really really fast) it may abort the connection that’s still considered open

This one works correctly:

for (let i = 1; i < 50; i++) {
    http.get(`https://swapi.co/api/people/${i}`).subscribe((result) => {
        console.log(i, result);
    });
}