异步角度请求的问题

问题描述

如何处理 angular 中的异步调用。我知道由于异步性质，我将数组设为未定义，但我该如何解决

private fetchData(id){
   var array = [];
   this.httpClient.get('someUrl/'+id).subscribe((organisation)=>{
      console.log(organisation.teams);   // ['team1','team2','team3']
      organisation.teams.forEach((team)=>{
          this.httpClient/get('someUrl/'+team).subscribe((teamData)=>{
             array.push(teamData);
          })
       })
       console.log(array);    // undefined
    })
}

解决方法

您的代码似乎运行良好，并且您正确使用了订阅功能。您记录 undefined 的原因是 console.log(array) 行在对 'someUrl'+team 的 get 请求返回值之前被调用。要检查这一点，您可以将 console.log(array) 行移到订阅范围内（array.push(teamData) 行所在的位置）。

使用更少缩进的更现代的编写方式是使用 async/await：

private async fetchData(id){
   var array = [];
   let organisation = await this.httpClient.get('someUrl/'+id).toPromise();
   console.log(organisation.teams);   // ['team1','team2','team3']
   let teamData;
   organisation.teams.forEach((team)=>{
       teamData = await this.httpClient/get('someUrl/'+team).toPromise()
       array.push(teamData);
   })
   console.log(array);
}