Angular 4 中的并行 HTTP 请求答案

【问题标题】：Parallel HTTP requests in Angular 4Angular 4 中的并行 HTTP 请求
【发布时间】：2017-09-15 21:08:25
【问题描述】：

我正在构建一个简单的天气应用程序，它使用 REST 服务来显示用户输入的任何城市的当前天气数据。

仪表板页面应显示用户指定的约 5 个城市的当前天气。

所以我的问题是 - 给定一个包含 5 个城市的数组，为该数组中的每个元素调用 REST 服务（通过 Angular 服务）的最佳方式是什么。

这是我最初尝试的代码摘录：

locations: string[] = ["Seattle", "Woodinville", "Krasnoyarsk", "Stockholm", "Beijing"];

...

ngOnInit() {

    this.locations.forEach(function(element) {
      this.weatherService.getWeather(element).subscribe((data) => {
        console.log(data);
      });
    });

  }

但这会产生错误：编译失败。

c:/Projects/weather-app/src/app/components/dashboard/dashboard.component.ts (19,12)：“void”类型上不存在属性“weatherService”。

我意识到“forEach”在这里不起作用 - 但在 ng 4 中执行此操作的最佳做法是什么？

谢谢。

【问题讨论】：

标签： angular rest http service

【解决方案1】：

这将map位于 Observables 数组中的位置数组， forkJoin 将在所有响应到位时发出值

Observable
.forkJoin(this.locations
  .map((element) => this.weatherService.getWeather(element))
.subscribe((data) => console.log(data));

【讨论】：

这正是我一直在寻找并回答我的问题 - 谢谢
如果我使用forkJoin 或者只是在循环迭代中调用相同的函数，有什么区别吗？

【解决方案2】：

问题是使用 function 关键字而不是箭头函数，您将失去 this 的含义。在使用 function 关键字的函数内部，this 指的是函数，而不是您的组件类。

修改如下：

this.locations.forEach(element => {
  this.weatherService.getWeather(element).subscribe((data) => {
    console.log(data);
  });
});

注意：您也可以考虑使用forkJoin 包装多个可观察对象。

您可以在此处找到相关文档：https://www.learnrxjs.io/operators/combination/forkjoin.html

但这里的例子可能更有帮助：rxjs with multiple forkjoin when doing http requests

更新：在此处查看改进的文档：

https://rxjs.dev/api/index/function/forkJoin

【讨论】：

感谢您的回答 - 是的，“这”就是问题所在。也会考虑使用“forkJoin”。
你能指出forkJoin的好处还是简单地调用forEach中的方法？
使用 forEach 您的代码需要订阅每个 Observable。这意味着您还应该取消订阅每个可观察对象（使用上面显示的代码是不可能的。）使用 forkJoin，您不必订阅任何“内部”可观察对象......只需订阅“外部” forkJoin。