angular - 如何使用 Angular 在一个函数上调用多个 API？

Question

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

如何在 Angular 4 上完成此任务？

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

Answer 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);

更多信息可以在这里找到

Answer 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
}

}