Web Services 如何使用Angular在一个函数上调用多个API?

dnph8jn4  于 2022-11-15  发布在  Angular
关注(0)|答案(2)|浏览(242)

我需要在一个函数上调用4个不同的API,该函数需要一个接一个地执行,因为我之前的API结果将使用下一个调用作为参数。例如:我有一个geo Ip调用API,然后我需要调用另一个API,我需要传递从第一个API调用获得的lat和long。
如何在angular 4上完成此任务?
我听说过一些方法,如flatmap和forkjoin。这个方法可以使用吗?(我没有任何代码,因为我有点困惑)。

bkkx9g8r

bkkx9g8r1#

您可以执行以下操作:

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。一旦我们获取了homeworld,我们就把它添加到角色对象中,并在我们的组件上设置loadedCharacter属性,你可以在那里对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

fxnxkyjh

fxnxkyjh2#

如果可以使用es6,则可以使用asyncawait

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

相关问题