Question

为什么在下面添加订阅时，我会看到第二次调用以获取Chrome开发人员网络选项卡中的JSON？

第二个电话是几毫秒后，显示一个完整的请求＆amp;响应

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

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

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

“异步”生成一个订阅，并且该组件上还有一个订阅。每个订阅都会触发可观察对象，从而生成两个HTTP调用。

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

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

1 个答案: