Question

有没有一种方法可以让Typescript中的forEach循环等待，以便像HTTP调用之类的异步代码可以正确完成。

比方说，我在一个角组件中有三个数组a []，b []和c []。功能共有三个，后两个取决于先前功能的完成。

loadA(){
this.http.get<a[]>(http://getA).subscribe(a=> this.a = a, 
()=>loadB());
}

loadB(){
this.a.forEach((res, index)=>{
this.http.get<b[]>('http://getBbyA/res').subscribe(b=> this.b.push(...b),
()=> {
if(index===this.a.length-1){
loadC());
}
}
});

loadC(){
this.b.forEach(res=>{
this.http.get<c[]>('http://getCbyB/res').subscribe(c=> this.c.push(...c));
});
}

对于第二个方法，现在forEach循环使b []数组正确装载了从http调用获取的数据后，无法调用loadC（）函数。如何使loadB（）中的forEach循环等待获取所有http结果，然后调用loadC（）以避免不可预测性？

更新（使用RxJs运算符）：

我在项目中尝试了以下方法：

loadData(): void {
    this.http.post<Requirement[]>(`${this.authService.serverURI}/requirement/get/requirementsByDeal`, this.dealService.deal).pipe(
      concatAll(), // flattens the array from the http response into Observables
      concatMap(requirement => this.http.post<ProductSet[]>(`${this.authService.serverURI}/productSet/getProductSetsByRequirement`, requirement).pipe( // loads B for each value emitted by source observable. Source observable emits all elements from LoadA-result in this case
        concatAll(), // flattens the array from the http response of loadB
        concatMap(pSet => this.http.post<Product[]>(`${this.authService.serverURI}/product/get/productsByProductSet`, pSet).pipe( // foreach element of LoadB Response load c
          map(product => ({requirement, pSet, product})) // return a object of type { a: LoadAResult, b: LoadBResult, c: LoadCResult}
        ))
      )),
      toArray()
    ).subscribe((results: { requirement: Requirement, productSet: ProductSet, product: Product }[] => {
      results.forEach(result => {
        this.requirements.push(...result.requirement);
        this.productSets.push(...result.productSet);
        this.products.push(...result.product);
      });
    }));
  }

但是我仍然遇到一些错误（TS2345）。我要去哪里错了？

Answer 1

有几种方法可以实现此目的。我建议使用rxJs运算符concatAll和concatMap，以便按顺序触发httpCalls。我准备了一个简短的摘要。首先加载A，然后对A中的每个元素加载B，对于B中的每个元素加载C。您可能需要根据需要调整结果的汇总

load(): void {
this.http.get<LoadAResult[]>("/loadA").pipe(
  concatAll(), // flattens the array from the http response into Observables
  concatMap(a => this.http.get<LoadBResult[]>("/loadB").pipe( // loads B for each value emitted by source observable. Source observable emits all elements from LoadA-result in this case
    concatAll(), // flattens the array from the http response of loadB
    concatMap(b => this.http.get<LoadCResult[]>("/loadC").pipe( // foreach element of LoadB Response load c
      map(c => ({a, b,c })) // return a object of type { a: LoadAResult, b: LoadBResult, c: LoadCResult}
    ))
  )),
  toArray()
).subscribe((results: { a: LoadAResult, b: LoadBResult, c: LoadCResult[]}[]) => {
  // do something with results
}));

}

Angular / TS：forEach循环内的异步HTTP调用

1 个答案: