等待 Http 调用 Angular 4 ForkJoin

Question

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() returns getObjectsById()

使用的 ID

getObjectsById() 遍历 ID 并对每个 ID 进行 http 调用。

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

将不胜感激。

Answer 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);
});

Answer 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();
    })

Answer 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 语法，因为您的原始代码不是。

等待 Http 调用 Angular 4 ForkJoin

Wait for Http calls Angular 4 ForkJoin

fork-join

rxjs

angular