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

Question

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

如何在角度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获取用户。 加载后，我们会再次请求获取该特定角色的家园。 一旦获得了家庭世界，便将其添加到角色对象，并在组件上设置了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
}

}