Повторяющиеся звонки на http в Angular на подписке

Question

Я новичок в angular и пытаюсь реализовать приложение на приборной панели. Панель инструментов содержит более 50 различных диаграмм, поэтому я решил собрать все данные этих диаграмм для одного пользователя API, файл json выглядит следующим образом

{
"site": "bje",
"date": "2018-03-09T00:00:00",
"charts": [
    {
        "code": "INDK-01",
        "dataset": [
            {
                "name": "Actual",
                "data": [
                    {
                        "label": "05 Jan 2018",
                        "value": 351,
                        "date": "2018-01-05T00:00:00"
                    },
                    {
                        "label": "12 Jan 2018",
                        "value": 373,
                        "date": "2018-01-12T00:00:00"
                    },
                    {
                        "label": "19 Jan 2018",
                        "value": 353,
                        "date": "2018-01-19T00:00:00"
                    },
                    {
                        "label": "26 Jan 2018",
                        "value": 379,
                        "date": "2018-01-26T00:00:00"
                    },
                    {
                        "label": "02 Feb 2018",
                        "value": 356,
                        "date": "2018-02-02T00:00:00"
                    },
                    {
                        "label": "09 Feb 2018",
                        "value": 371,
                        "date": "2018-02-09T00:00:00"
                    },
                    {
                        "label": "16 Feb 2018",
                        "value": 371,
                        "date": "2018-02-16T00:00:00"
                    },
                    {
                        "label": "23 Feb 2018",
                        "value": 368,
                        "date": "2018-02-23T00:00:00"
                    },
                    {
                        "label": "02 Mar 2018",
                        "value": 369,
                        "date": "2018-03-02T00:00:00"
                    },
                    {
                        "label": "09 Mar 2018",
                        "value": 371,
                        "date": "2018-03-09T00:00:00"
                    }
                ]
            },
            {
                "name": "Budget",
                "data": [
                    {
                        "label": "05 Jan 2018",
                        "value": 0,
                        "date": "2018-01-05T00:00:00"
                    },
                    {
                        "label": "12 Jan 2018",
                        "value": 0,
                        "date": "2018-01-12T00:00:00"
                    },
                    {
                        "label": "19 Jan 2018",
                        "value": 0,
                        "date": "2018-01-19T00:00:00"
                    },
                    {
                        "label": "26 Jan 2018",
                        "value": 0,
                        "date": "2018-01-26T00:00:00"
                    },
                    {
                        "label": "02 Feb 2018",
                        "value": 0,
                        "date": "2018-02-02T00:00:00"
                    },
                    {
                        "label": "09 Feb 2018",
                        "value": 0,
                        "date": "2018-02-09T00:00:00"
                    },
                    {
                        "label": "16 Feb 2018",
                        "value": 0,
                        "date": "2018-02-16T00:00:00"
                    },
                    {
                        "label": "23 Feb 2018",
                        "value": 0,
                        "date": "2018-02-23T00:00:00"
                    },
                    {
                        "label": "02 Mar 2018",
                        "value": 0,
                        "date": "2018-03-02T00:00:00"
                    },
                    {
                        "label": "09 Mar 2018",
                        "value": 331.02,
                        "date": "2018-03-09T00:00:00"
                    }
                ]
            },
            {
                "name": "Target",
                "data": [
                    {
                        "label": "05 Jan 2018",
                        "value": 0,
                        "date": "2018-01-05T00:00:00"
                    },
                    {
                        "label": "12 Jan 2018",
                        "value": 0,
                        "date": "2018-01-12T00:00:00"
                    },
                    {
                        "label": "19 Jan 2018",
                        "value": 0,
                        "date": "2018-01-19T00:00:00"
                    },
                    {
                        "label": "26 Jan 2018",
                        "value": 0,
                        "date": "2018-01-26T00:00:00"
                    },
                    {
                        "label": "02 Feb 2018",
                        "value": 0,
                        "date": "2018-02-02T00:00:00"
                    },
                    {
                        "label": "09 Feb 2018",
                        "value": 0,
                        "date": "2018-02-09T00:00:00"
                    },
                    {
                        "label": "16 Feb 2018",
                        "value": 0,
                        "date": "2018-02-16T00:00:00"
                    },
                    {
                        "label": "23 Feb 2018",
                        "value": 0,
                        "date": "2018-02-23T00:00:00"
                    },
                    {
                        "label": "02 Mar 2018",
                        "value": 0,
                        "date": "2018-03-02T00:00:00"
                    },
                    {
                        "label": "09 Mar 2018",
                        "value": 331.02,
                        "date": "2018-03-09T00:00:00"
                    }
                ]
            }
        ]
    },..............etc
] }

Сервисный файл .ts содержит функцию, которая возвращает данные следующим образом:

getDashboardData(): Observable<ProcessedData>{

return this._http.get<ProcessedData>(this.baseUrl)
  .map(res => res);
  }

Кроме того, я создал один повторно используемый компонент, который принимает ввод кода диаграммы (например, «INDK-01» в приведенном выше примере json) и в ngOnInit У меня есть этот код

ngOnInit() {    
this._service.getDashboardData(this.selectedSite, this.selectedDate)
  .subscribe(res => {          
      this.BudgetData = res.charts.find(x => x.code == this.chartId)
      .dataset.find(x => x.name == 'Budget')
      .data
      .sort();
       this.TargetData = res.charts.find(x => x.code == this.chartId)
      .dataset.find(x => x.name == 'Target')
      .data
      .sort();
.
.
.
});

в домашний компонент приборной панели я добавляю несколько проблема в том, что он делает несколько вызовов API каждый раз, когда я загружаю страницу панели инструментов, есть ли способ избежать этого? как, например, хранить данные в глобальном объекте и от каждой диаграммы будет фильтровать для получения правильных данных.

Answer 1

Вы можете использовать ".share".

this._service.getDashboardData(this.selectedSite, this.selectedDate).subscribe(res => 
{
  this.BudgetData = res.charts.find(x => x.code == this.chartId)
  .dataset.find(x => x.name == 'Budget')
  .data
  .sort();
   this.TargetData = res.charts.find(x => x.code == this.chartId)
  .dataset.find(x => x.name == 'Target')
  .data
  .sort();
}).share();

Answer 2

Сначала вам нужно shareReplay(1) заметить что-то вроде следующего для кеширования данных:

const sharedOb = this._service.getDashboardData(this.selectedSite, this.selectedDate).shareReplay(1)

sharedOb.subscribe(x=>{
// do your work here
})

Теперь вы можете подписаться на sharedOb столько раз, сколько вы хотите, будет только один сервер в оба конца.