订阅可观察的生成第二个http get（HttpClient）

Question

Why when adding the subscription below do I see a second call to get the JSON in the chrome developer network tab?

The second call is a few milliseconds later and shows a full request & response

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';

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

  repositories: Observable<Array<any>>;

  constructor(http: HttpClient) {

    const path = 'https://api.github.com/search/repositories?q=angular&sort=stars&order=desc';

    this.repositories = http.get<any>(path).pipe(map(obj => obj.items));

    // adding this subscription creates 
    // a second call for the JSON?
    this.repositories.subscribe(next => {
      localStorage['repoCache'] = JSON.stringify(next);
    });
  }
}

Answer 1

You probably have something like this on your template:

<div *ngIf="repositories">
  <li *ngFor="let repository of (repositories | async)">{{repository.name}}</li>
</div>

"async" generates a subscription and you have another one on the component. Each subscription will fire the observable, thus generating two HTTP calls.

Lastly, I would recommend not to do http calls on the constructor, instead implement the "OnInit" method, which is a better place in the lifecycle of a component for that type of work.