如何使用 Angular 在一个函数上调用多个 API？答案

【问题标题】：How can I call multiple API's on a function with Angular?如何使用 Angular 在一个函数上调用多个 API？
【发布时间】：2018-08-20 14:14:55
【问题描述】：

我需要在一个函数上调用 4 个不同的 API，该函数需要一个接一个地执行，因为我之前的 API 结果将使用下一个调用作为参数。例如：我有一个 geo Ip 的调用 API，然后我需要调用另一个 API，我需要传递从第一个 API 调用获得的 lat 和 long。

如何在 Angular 4 上完成这项任务？

我听说过一些方法，例如 flatmap 和 forkjoin。请问这个方法可以用吗？（我没有任何代码，因为我有点困惑）。

【问题讨论】：

可以添加一些代码吗？
fnSiteFlagFromFlagMaster(strSiteFlag){ return this.serviceAPI.getServiceFlag(strSiteFlag) .subscribe(data => { this.siteFlag=data.SiteFlag; this.getVisterId(this.siteFlag); }); } 像这样我需要调用 4 个不同的 API
我很困惑，你在谷歌上找不到它
请使用代码编辑您的问题，不要只是将其粘贴到 cmets 中。另请阅读此处的帮助部分，了解如何提出可以得到答案的问题：stackoverflow.com/help/asking

标签： angular rest web-services angular-services angular-observable

【解决方案1】：

你可以这样做：

  this.http.get('/api/people/1').subscribe(character => {
      this.http.get(character.homeworld).subscribe(homeworld => {
        character.homeworld = homeworld;
        this.loadedCharacter = character;
      });
    });

所以这里基本上是链接 http 调用。首先，我们请求从 /api/user/1 获取用户。加载后，我们会发出第二个请求，以获取该特定角色的家园。一旦我们获得了 homeworld，我们将它添加到角色对象并在我们的组件上设置 loadCharacter 属性，您可以在那里为 4 个 https 调用做类似的事情。

您可以使用 mergeMap 运算符来执行此操作示例：

this.http.get('./customer.json')
            .map((res: Response) => res.json())
            .mergeMap(customer => this.http.get(customer.contractUrl))
            .map((res: Response) => res.json())
            .subscribe(res => this.contract = res);

更多信息请关注here

【讨论】：

【解决方案2】：

如果你可以使用 es6，你可以使用 async 和 await

async makeCalls() {
try {
  let response1 = await this.http.get(firstEndpointUrl).toPromise();
  let secondEndpointUrl = 'someUrl/' + response1.json().id;
  let response2 = await this.http.get(secondEndpointUrl).toPromise();
  let thirdEndpointUrl = 'someUrl/' + response2.json().id;
  let response3 = await this.http.get(thirdEndpointUrl).toPromise();
  return response3.json();
} catch (error) {
  // handle error
}

}

【讨论】：