Angular 订阅observable会生成第二个http get（HttpClient）

为什么在下面添加订阅时，我会在chrome开发者网络选项卡中看到第二个获取JSON的调用

第二个调用在几毫秒后显示完整的请求和响应

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);
    });
  }
}

从'@angular/core'导入{Component}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/operators”导入{map}；
从“rxjs/Observable”导入{Observable}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
储存库：可观察；
构造函数（http:HttpClient）{
常数路径https://api.github.com/search/repositories?q=angular&sort=stars&order=desc';
this.repositories=http.get（path）.pipe（map（obj=>obj.items））；
//添加此订阅将创建
//第二次调用JSON？
this.repositories.subscribe（下一步=>{
localStorage['repoCache']=JSON.stringify（下一步）；
});
}
}

您的模板上可能有类似的内容：

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

{{{repository.name}

“异步”生成一个订阅，您在组件上有另一个订阅。每个订阅都将触发可观察的，从而生成两个HTTP调用

---

最后，我建议不要对构造函数进行http调用，而是实现“OnInit”方法，对于该类型的工作，这在组件的生命周期中是一个更好的位置。

是

OPTIONS

type的第一个请求吗？您可以参考share（）。Read您是否可以显示使用过的模板，您是否在模板中使用了asyncPipe（| async）？因为asyncPipe已经对传入的可观察参数进行了订阅Yes，所以我使用async尝试找出如何只进行一次http调用

{{repo.name}

似乎是一个简单的修复方法谢谢大家//从“rxjs/operators”添加一个额外的导入{share}；//在管道this.repositories=http.get（path）.pipe（map（obj=>obj.items），share（）中包含share（）；