订阅时在 Angular 中重复调用 http答案

【问题标题】：Duplicate calls to http in Angular on Subscribe订阅时在 Angular 中重复调用 http
【发布时间】：2018-05-02 15:45:18
【问题描述】：

我是 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);
  }

我还创建了一个可重复使用的组件，它接受图表代码的输入（例如，上面 json 示例中的“INDK-01”）和 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 的问题，有什么办法可以避免这种情况吗？例如，将数据存储在全局对象中，然后从每个图表中过滤以获取正确的数据。

【问题讨论】：

您可以在您创建的此服务中存储数据。当您访问此 getDashboardData 时，首先检查它是否有数据。如果没有，请执行 http 请求并存储在那里。然后从这个存储的值中返回数据（在服务的实例变量中）。
无论如何还有其他方法，例如使用全局状态容器（您可以阅读有关 redux、@ngrx 等的信息）或使用浏览器中的本地存储。这些中的任何一个都有其优点和缺点。

标签： javascript angular http rxjs

【解决方案1】：

你需要首先shareReplay(1)你的 observable 来缓存数据：

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

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

现在您可以随意订阅sharedOb，只有一个服务器往返。

【讨论】：

这段代码会在每个图表组件中运行，不是吗？？？根据我传递的 id，这些值会从一个图表变为另一个图表。目标是获取所有 json 响应并将它们存储在一个数组中并通过 chartId 过滤数据，只有当 selectedSite 和/或 selectedDate 更改时才会刷新数据，然后它必须使用 DB 中的 API 再次刷新数据。跨度>

【解决方案2】：

您可以使用“.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();

【讨论】：

这段代码会在每个图表组件中运行，不是吗？？？根据我传递的 id，这些值会从一个图表变为另一个图表。目标是获取所有 json 响应并将它们存储在一个数组中并通过 chartId 过滤数据，只有当 selectedSite 和/或 selectedDate 更改时才会刷新数据，然后它必须使用 DB 中的 API 再次刷新数据。跨度>