时间戳

首页 > 解决方案 > 多个http调用角度7

angular - 多个http调用角度7

问题描述

我遇到了一种情况，我必须根据父数据获取一些数据

  1. 我发出了一个 http get 请求来获取所有组件列表，并且在订阅中我有一个 forEach 循环来遍历每个组件。

  2. 在每个组件的 for 循环中，我进行了另一个 http get 调用以获取每个组件的子组件。

  3. 在外部循环中，我必须仅将组件名称推送到新数组，而在内部循环中，我必须将子组件名称推送到与属性“children”相同的数组中。

现在的问题是外部循环在内部循环之前完成，因此数组如下所示

[{名称：'parentcomp1'，孩子：[{}]}]

这是代码

prepareJson() {

this.service.getComps().subscribe(res =>{
  var comps = res;
  var that = this;
 
 for(var element of comps) {
 
 that.service.getChilds(element._id).subscribe((res1:any)
 =>{
 
 if(res1.length>0)
 
   list.push({name:element.name,children:res})
 },err => console.log(err));
 }


},err => console.log(err));
}

请帮忙。

标签： angular

解决方案

要首先修复上述代码，您的函数应该返回一个 Observable/Promise，因为 HTTP 调用是异步的。

此外，您可以使用“mergeMap”来解决您面临的进一步问题。一个例子是这样的（注意：代码未经测试）

import { Observable, from, EMPTY, Subject } from 'rxjs';
import { mergeMap, finalize, catchError } from 'rxjs/operators';


private prepareJson(): Observable<T> {
const response$ = new Subject<T>();

this.service.getComps().subscribe(res => {
    const comps = res;

    from(comps)
    .pipe(
        mergeMap((element: any) => {
        return this.service.getChilds(element._id)
            .pipe(
            catchError(err => {
                console.log(err);
                return EMPTY;
            })
            );
        }),
        finalize(() => {
        response$.next(list);
        response$.complete();
        }),
    ).subscribe((res1: any) => {
        if (res1.length > 0) {
        list.push({ name: element.name, children: res });
        }
    });
}, (err) => {
    console.log(err);
    response$.error(err);
    response$.complete();
});

return response$.asObservable();
}

在这里，'prepareJson' 是返回一个可观察到的外部世界。我们正在从“getComps”中获取结果，并在此基础上获取子项。一旦检索到所有结果，就会通过 observable 触发结果。

推荐阅读