Angular2 可观察共享不起作用

Question

Angular2 Observable 共享不起作用，重复的 http 调用正在进行

BuildingService.ts

@Injectable()
export class BuildingService {

constructor(private http: Http){       
  }

buildings$: Observable<Building[]>;
this.buildings: Building[];

getData() : Observable<Building[]>{
     this.buildings$ = this.http.get('http://localhost:8080/buildings').share().map(this.extractData);
     this.buildings$.subscribe(buildings => this.buildings = buildings);
     return this.buildings$;
  }

 private extractData(res: Response) {
    let body = res.json();
    return body;
} 

}

component1.ts

export class component1 {
constructor( private  buildingService: BuildingService) {}

this.subscription = this.buildingService.getData()
            .subscribe(buildings => console.log(buildings),
            error =>  this.errorMessage = <any>error);
}

component2.ts

export class component2 {
constructor( private  buildingService: BuildingService) {}

this.subscription = this.buildingService.getData()
            .subscribe(buildings => console.log(buildings),
            error =>  this.errorMessage = <any>error);
}

共享不工作，多个 http 调用正在进行。即使我尝试了来自 this link 的代码

但没用。

有人可以告诉我如何避免使用 Angular Observable 进行重复的 http 调用吗？

Answer 1

我认为这只是对 share() 功能的误解。

当您调用 this.buildings$.subscribe(...) 时，由于 share() 运算符，它会生成一个 ConnectableObservable紧随其后的是 connect()。

如果您在 HTTP 请求挂起时进行另一个订阅，它只会将另一个观察者添加到 ConnectableObservable 中，当响应准备好时，它将发送给两个观察者。但是，如果您让 this.buildings$ 完成，然后您再次订阅，它将发出另一个 HTTP 请求，因为 ConnectableObservable 未连接到其源。

您想要的是 .publishReplay(1).refCount()(或 shareReplay(1) 自 RxJS 5.4.0 以来)重播从来源。您很可能还想附加 take(1) 以正确完成链。