Multiple subscrptions on single request call create multiple requests

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When having multiple subscriptions on an observable returned from an http.post request the request function is only called once but the request is executed once for each subscriptions

Expected behavior

each call to http.post function results in exactly one request

Minimal reproduction of the problem with instructions

In a clean angular app use this component: (add HttpModule to app.module)

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  count = 0;

  constructor(private http: Http) {
    const o = this.request();
    o.subscribe(() => console.log('foo'), () => console.log('foo'));
    o.subscribe(() => console.log('bar'), () => console.log('bar'));
  }

  request(): Observable<any> {
    console.log('request ' + this.count++);
    return this.http.post('https://foo.bar', {});
  }
}

Inspect the page and reload to see network activity.

Although the request() function has only been called once the request is actually executed twice

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.6.0 and 4.4.6


Browser:
- [x ] Chrome (desktop) version 63.0.3239.132
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ x ] Firefox version 52 ESR
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
Others:

[frederikprijck]

@wutscher0815 This is how rxjs (which is what http uses internally) works (btw, you want to use HttpClient instead of Http) You probably want to have a look at rxjs operators to avoid this.

Try the following to “resolve” your “issue”:

request(): Observable<any> {
    console.log('request ' + this.count++);
    return this.http.post('https://foo.bar', {}).shareReplay();
  }

Note: This is only one of the possible solutions (be sure to have a look at share, shareReplay and publishReplay), but you probably wanna dig into how rxjs works.

Nevertheless, this doesn’t have anything to do with Angular itself.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}