如何在angular2 cli项目中并行调用多个组件的单个ajax请求

Question

场景是，有一个服务（json-data-service.ts）有一个方法getWebservicedata（），它返回http.post（url），即它在调用方法时进行ajax调用。 我有不同的组件，如（饼图组件，条形图组件，折线图组件等），它们都是在一个页面上同时创建的。它们都有不同的元数据（clientJson）和单个可观察的元素。

有没有办法，我们可以并行地通过多个组件发出单个ajax请求。

换句话说，有没有办法在执行ajax请求之前，它从不同的组件（PieComponent.ts，LineComponent.ts等）获取所有元数据，并从同一个URL获取不同元数据的数据（clientJson）不同组件，同时平行？

JSON-数据service.ts

    getSolrData(clientJson): Observable<JsonData[]> {
    console.log('Retriving Data from Solr Server.......' + JSON.stringify(clientJson));
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    let url = "http://183.82./PI3_Sor_WebSer/solrSe"; 
    return this.http.post(url, clientJson).map((res: Response) => res.json());
  }

饼chart.component.ts

initData() {

    let clientJson = {
      "aoId": "M_AO_918","viewBys": ["usstate"]----------------- };

    this.jsonDataService.getSolrData(clientJson).subscribe(
      success => this.buildPieChart(success),
      error => this.errorMessage = error
    );
  }
  buildPieChart(jsonData) {
-----------
}

线chart.component.ts

initData() {

    let clientJson = {
      "aoId": "M_AO_918","viewBys": ["brands"]----------------- };

    this.jsonDataService.getSolrData(clientJson).subscribe(
      success => this.buildlineChart(success),
      error => this.errorMessage = error
    );
  }
  buildlineChart(jsonData) {
-----------
}

Answer 1

你想要使用rxjs .share（）方法（https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/share.md）。基本上它允许多个订阅者共享相同的可观察序列。

export class Service {
  observableShare: Observable<string>; // store the shared observable
  
  constructor(private http: Http){}
  
  getData(){
    if(this.observableShare){ // if api is still processing, return shared observable
        return this.observableShare;
    }else{ // else api has not started, start api and return shared observable
      this.observableShare = this.http.post('url')
        .map(res => res.json())
        .share(); // share observable sequence among multiple subscribers
      
      return this.observableShare;
    }
    
  }
}

这是一个可以在控制台中看到的工作plunkr（https://plnkr.co/edit/MU4aoFI34ZGjjtQ5wS9j?p=preview），3个单独的订阅共享相同的可观察序列（http请求）。

这是另一个例子，它进一步将结果存储在服务中（https://plnkr.co/edit/M9ZIViYhSbKzPlzKXC7H?p=preview）。这充当缓存，因此如果稍后加载的组件需要数据，则不需要额外的api调用。但是你不需要这个功能。