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

1

Я новичок в угловых и пытается реализовать приложение панели инструментов. Панель инструментов содержит 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) an in 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 каждый раз, когда я загружаю страницу панели мониторинга, есть ли способ избежать этого? например, хранить данные в глобальном объекте и с каждого графика фильтровать, чтобы получить правильные данные.

  • 1
    Вы можете хранить данные внутри этой службы, которую вы создали. Когда вы получаете доступ к этому getDashboardData, сначала вы проверяете, есть ли у него данные. Если этого не произойдет, выполните http-запрос и сохраните его там. Затем вы возвращаете данные из этого сохраненного значения (в переменной экземпляра службы).
  • 0
    В любом случае, есть и другие способы, такие как использование контейнера глобального состояния (вы можете прочитать о redux, @ngrx и т. Д.) Или использование локального хранилища из браузера. У каждого из них есть свои плюсы и минусы.
Теги:
angular
rxjs
http

2 ответа

0

Вы можете использовать ".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();
Поделиться
  • 0
    этот код будет работать в каждом компоненте диаграммы, не так ли? значения будут отличаться от одного графика к другому в зависимости от идентификатора, который я передаю. цель состоит в том, чтобы получить все ответы json, сохранить их в массиве и отфильтровать данные по chartId. Данные будут обновляться только в том случае, если selectedSite и / или selectedDate изменились, а затем необходимо обновить данные снова, используя API из DB.
0

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

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

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

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

Поделиться
  • 0
    этот код будет работать в каждом компоненте диаграммы, не так ли? значения будут отличаться от одного графика к другому в зависимости от идентификатора, который я передаю. цель состоит в том, чтобы получить все ответы json, сохранить их в массиве и отфильтровать данные по chartId. Данные будут обновляться только в том случае, если selectedSite и / или selectedDate изменились, а затем необходимо обновить данные снова, используя API из DB.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню