javascript - 当第二个请求依赖于第一个请求时，如何在 Angular 中同步 http.get 请求？

Question

我需要从 Angular 向我的数据库执行一系列 http 请求。在第一步中，我得到了一个对象数组。这工作正常。在第二步中，我想用附加数据填充每个对象。所以我需要等待第一个 http.request 完成。 我也不想在我的数据被提取之前返回。

我的函数 getData() 应该返回一个 Observable，因为接口(interface)/签名不应该改变(因为它正在程序的其他部分使用并且 observable 对程序逻辑有意义)。

// Returns an array with objects, that have an id, that is needed for the second call 

data[] : Object = new Array(); 
populatedData[] : Object = new Array();


getData(): Observable<Object[]>{
  this.http.get<Object[]>("http://localhost:3000/data").subscribe(data => this.data = data);

// This needs the data from the first call 
 for(int i = 0; i < data.length; i++){
this.http.get<Object>("http://localhost:3000/data/"+data[i].id).subscribe(data => populatedData.push(data)); 
}


return of(populatedData); 

}

Answer 1

您可以使用 switchMap(在初始 GET 完成后，发出其他请求)和 forkJoin(发出多个请求并在所有请求完成时发出)。像这样:

    getSingleEntry = ({ id }) => this.http.get<Object[]>("http://localhost:3000/data/" + id);

    getData = () => this.http.get<Object[]>("http://localhost:3000/data")
        .pipe(
            tap(data => this.data = data),
            switchMap(data => forkJoin(data.map(this.getSingleEntry)));