Question

我想使用rxJS在angular 2中的不同级别同步进行多个http调用例如，我有一个解析器服务，可以处理5个api调用，例如a，b，c，d和e。

我希望它们按此顺序执行，并且我不使用任何这些输出值作为输入，因此我只需要在最后使用所有响应即可。

首先应调用a，并且一旦api完成第二个b，c，d b，c，d完成后的第三次，则应调用e

在激活的Route中，我需要检索这些值并使用它我已经尝试过以下方法，但仅得到A和E的响应，而无法从内部可观察值中获取值

resolve(a,b){
 return A.flatMap(data=> {
      return forkJoin (
                 B,C,D)
                  }).flatMap(xres => {
                                 return E
                                 })
}
route.data.dataA
route.data.dataBCD
route.data.dataE

Answer 1

如果您有一个解析器负责处理所有5个请求，以确保它们的执行顺序，则有必要将这5个请求的结果作为一个元素返回。请尝试以下操作：

import {Observable, forkJoin} from 'rxjs';
import {mergeMap, map} from 'rxjs/operators';

interface AFoo { }
interface BFoo { }
interface CFoo { }
interface DFoo { }
interface EFoo { }

class FooService {
  doA(): Observable<AFoo> { throw new Error("Not implemented"); }
  doB(): Observable<BFoo> { throw new Error("Not implemented"); }
  doC(): Observable<CFoo> { throw new Error("Not implemented"); }
  doD(): Observable<DFoo> { throw new Error("Not implemented"); }
  doE(): Observable<EFoo> { throw new Error("Not implemented"); }
}

interface CompositeFoo {
  aFoo: AFoo;
  bFoo: BFoo;
  cFoo: CFoo;
  dFoo: DFoo;
  eFoo: EFoo;
}

export class FooResolver implements Resolve<CompositeFoo>{
  constructor(private fooService: FooService) { }
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<CompositeFoo> {
    const forked$ = forkJoin(this.fooService.doB(), this.fooService.doC(), this.fooService.doD())
                    .pipe(map(([bFoo, cFoo, dFoo]) => ({ bFoo, cFoo, dFoo })));
    return this.fooService.doA()
      .pipe(
      mergeMap(aFoo => forked$.pipe(map(forked => ({ ...forked, aFoo })))),
      mergeMap(result => this.fooService.doE().pipe(map(eFoo => ({ eFoo, ...result })))),
      map(result => ({ ...result }))
      );
  }
}

Answer 2

假设您已经准备好A，B，C，D和E这些有角度的http服务，则可以尝试

A.subscribe((responseFromA) => {
     Observable.zip(B, C, D).subscribe(([responsefromB, responseFromC, responseFromD])=> {
          E.subscribe( (responseFromE)=> {
               // Here you can get all above resposne
        });
    });
})

如何使用rxJS在angular 2中的不同级别同步进行多个http调用

2 个答案: