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

Question

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

如何在角度 4 上完成此任务？

我听说过一些方法，如平面图和叉接。这个方法可以使用吗？(我没有任何代码，因为我有点困惑(。

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 获取用户。加载后，我们发出第二个请求，以获取该特定角色的家园。一旦我们得到主世界，我们将其添加到字符对象并在我们的组件上设置 loadedCharacter 属性，您可以在那里对 4 个 https 调用做类似的事情。

您可以使用合并映射运算符执行此操作例：

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