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

Question

我想在 angular 2 中使用 rxJS 在不同级别同步进行多个 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 个请求，为了确保它们的执行顺序，那么 return 将这 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 }))
      );
  }
}

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

how to make multiple http calls synchronously at different levels in angular 2 using rxJS

rxjs

angular

angular-httpclient