Как сделать несколько вызовов HTTP синхронно на разных уровнях в Angular 2, используя rxJS - PullRequest
Новая
       18

Как сделать несколько вызовов HTTP синхронно на разных уровнях в Angular 2, используя rxJS

0 голосов
/ 25 сентября 2018

Я хочу сделать несколько HTTP-вызовов синхронно на разных уровнях в angular 2, используя rxJS. Например, у меня есть служба распознавания, которая обрабатывает 5 вызовов API, таких как a, b, c, d и e.

Я хочу, чтобы они выполнялись в этом порядке, и я не использую ни одно из этих выходных значений в качестве входных данных, поэтому мне нужны все ответы только в конце.

сначала должен быть вызван a, а после - apiзавершено второе b, c, d третье после b, c, d завершено, затем e должно называться

В активированном маршруте мне нужно получить эти значения и использовать его. Я уже пробовал описанные ниже вещи, но получаю ответтолько 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

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Если у вас есть один распознаватель, который заботится обо всех 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 }))
      );
  }
}
0 голосов
/ 25 сентября 2018

Если у вас есть готовые угловые службы http A, BC, D и E, вы можете попробовать это 

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