等待Http调用Angular 4 ForkJoin答案

【问题标题】：Wait for Http calls Angular 4 ForkJoin等待Http调用Angular 4 ForkJoin
【发布时间】：2019-01-20 23:39:04
【问题描述】：

Observable.forkJoin(this.cdsDataService.getServersForComponent().map(one => this.Servers = one),
    this.cdsDataService.getComponentForServer().map(two => this.Components = two))
    .subscribe(res => {

        //for these ids more http calls are made 
        for (let comp of this.Components) {
            this.compIds.push(comp.ID);
            //does not wait for this http call to complete
            this.getObjectsById();
            SomeMethod();
        }}
    );

getObjectsById()
{
    let observableBatch = [];
    this.compIds.forEach((key) => {
        observableBatch.push(this.cdsDataService.getComponentLinks(key).subscribe(p => {
            //console.log(key);
            for (let it of p) {
                let nodelink = {from: key, to: it.ID, color: "blue"};
                this.componentLinkData.push(nodelink);
            }
            // console.log(p);
        }));
    });
    return Observable.forkJoin(observableBatch);
}

getComponentForServer() 返回 getObjectsById() 使用的 id

getObjectsById() 循环遍历 id 并对每个 id 进行 http 调用。

我无法让程序等待来自getObjectsById() 的所有调用完成。它只是跳转到SomeMethod()；

我们将不胜感激。

【问题讨论】：

标签： angular rxjs fork-join

【解决方案1】：

您正在订阅每个请求，而不是订阅forkjoin。

this.compIds.forEach((key) => {
    observableBatch.push(this.cdsDataService.getComponentLinks(key));
});

return Observable.forkJoin(observableBatch).subscribe((p: any[]) => {
    //console.log(key);

    for (let it of p) {
        let nodelink = { from: key, to: it.ID, color: "blue" };
        this.componentLinkData.push(nodelink);
    }
    // console.log(p);
});

【讨论】：

即便如此它仍然没有等待..http调用加载数据但图表是在数据完全加载之前绘制的

【解决方案2】：

您实际上是在 subscribe() 中执行 subscribe()。因为http 调用是异步的，所以代码只是执行而不等待结果。

请改用switchMap 或concatMap：

Observable.forkJoin(this.cdsDataService.getServersForComponent(), this.cdsDataService.getComponentForServer())
    .switchMap(([servers, components]) => {
        let observableBatch = components.map(comp => this.cdsDataService.getComponentLinks(comp.ID)
            .map(p => {
                this.componentLinkData = p.map(it => ({from: comp.ID, to: it.ID, color: "blue"}))
            }));
        return Observable.forkJoin(observableBatch)
    })
    .subscribe(()=>{
        SomeMethod();
    })

【讨论】：

【解决方案3】：

试试这个：

Observable.forkJoin(
  this.cdsDataService.getServersForComponent().map(one => this.Servers = one),
  this.cdsDataService.getComponentForServer().map(two => this.Components = two))
).switchMap(() => {
  return Observable.forkJoin(this.Components.map(c => {
    return this.cdsDataService.getComponentLinks(c.ID).tap(links => {
      links.forEach(link => {
        let nodelink = {from: c.ID, to: link.ID, color: "blue"};
        this.componentLinkData.push(nodelink);
      });
    });
  }));
}).subscribe(() => {
  console.log('I am done!');
  SomeMethod();
});

不使用 pipable 语法，因为您的原始代码不是。

【讨论】：