链接两个以上的Angular Observable调用

Question

I'm currently working on an Angular 5 service, and I need to chain four separate Observable calls, with each subsequent call using the data from some or all previous calls . I've seen some examples of combining two calls, but I don't see how to use more than two (and trying to extend them, via flatMap , has resulted in the data from previous calls not being available in subsequent calls).

• CallOne returns Observable<Foo[]>
  • I then need to do some filtering to pick a specific Foo
• CallTwo requires a Foo and returns Observable<FooTwo[]>
  • I then need to do some filtering to pick a specific FooTwo
• CallThree requires a FooTwo and returns Observable<FooThree[]>
  • I then need to do some filtering to pick a specific FooThree
• CallFour requires a Foo , a FooTwo , and a FooThree and returns Observable<Bar[]>

Afterwards, I need access to the chosen Foo , FooTwo , FooThree and a specific Bar .

Answer 1

You can use mergeMap and forkJoin , with forkJoin you can fire parallel request at time and it will till all request completed.

Observable.forkJoin(
    call1(params),
    call2(params),
    call3(params)
).subscribe((responses) => {
    // responses[0] -> response of call1
    // responses[1] -> response of call2
    // responses[2] -> response of call3
})

However if you want to make it synchronous and make the request dependent on the previous call, you can do like this,

const request1$ = Rx.Observable.of('response1').delay(2000);
const request2$ = Rx.Observable.of('response2').delay(100);

Rx.Observable.forkJoin(request1$, request2$)
  .subscribe(res => console.log(`forkJoin: ${res}`));

Handling Observables that depend on each other

Answer 2

• CallOne returns Observable<Foo[]>
  • I then need to do some filtering to pick a specific Foo
• CallTwo requires a Foo and returns Observable<FooTwo[]>
  • I then need to do some filtering to pick a specific FooTwo
• CallThree requires a FooTwo and returns Observable<FooThree[]>
  • I then need to do some filtering to pick a specific FooThree
• CallFour requires a Foo , a FooTwo , and a FooThree and returns Observable<Bar[]>

Based on the above spec:

callOne().pipe(
    switchMap((foos: Foo[]) => {
         // filtering foos to get Foo
         this.Foo = <filtered_foo>;
         return callTwo(<filtered_foo>);
    }),
    switchMap((foos2: FooTwo[]) => {
         // filtering foos2 to get FooTwo
         this.FooTwo = <filtered_foo_two>;
         return callThree(<filtered_foo_two>);
    }),
    switchMap((foos3: FooThree[]) => {
         // filtering foos3 to get FooThree
         this.FooThree= <filtered_foo_three>;
         return callFour(this.Foo, this.FooTwo, <filtered_foo_three>);
    })
).subscribe((bars: Bar[]) => {
    this.bars = bars;
    /**
     * this.Foo, this.FooTwo, this.FooThree and this.bars will all be available here
     */
})

Answer 3

I'm not sure if this is the most efficient way to solve this, but this is what worked for me:

 return this.callOne()
  .flatMap(foo => {
    // foo filter logic here
    return this.callTwo(foo[0].id).map(fooTwo => ({ foo, fooTwo }));
  })
  .flatMap(({ foo, fooTwo }) => {
    // fooTwo filter logic here
    return this.callThree(fooTwo[0].id).map(fooThree => ({ foo, fooTwo, fooThree }));
  })
  .flatMap(({ foo, fooTwo, fooThree }) => {
    return this.callFour(fooTwo[0].id, fooThree[0]).map(bar => ({ foo, fooTwo, fooThree, bar }));
  })
  .do(({ foo, fooTwo, fooThree, bar }) => {
    // additional processing here
    return ({ foo, fooTwo, fooThree, bar });
  });

Answer 4

Since you have so many values you need to keep track of, I would really suggest you use Subject . That is the exact purpose of Subject - to retain the values. In your case for example you can use BehaviourSubject .

First, declare the subject needed:

let call1Subject = new BehaviourSubject<Foo[]>(null);
let call2Subject = new BehaviourSubject<FooTwo[]>(null);
let call3Subject = new BehaviourSubject<FooThree[]>(null);

Now, you can update the values of the BehaviourSubject using .next , and you can get its most current value via .value() :

return this.callOne()
    .flatMap(foo => {
        // foo filter logic here
        call1Subject.next(foo);
        return this.callTwo(foo[0].id);
    })
    .flatMap(fooTwo => {
        // fooTwo filter logic here
        call2Subject.next(fooTwo);
        return this.callThree(fooTwo[0].id);
    })
    .flatMap(fooThree => {
        call3Subject.next(fooThree);
        let fooTwo = call2Subject.value();
        return this.callFour(fooTwo[0].id, fooThree[0]);
    })
    .map(bar => {
        // additional processing here

        let foo = call1Subject.value();
        let fooTwo = call2Subject.value();
        let fooThree = call3Subject.value();

        return ({foo, fooTwo, fooThree, bar});
    });

The code looks much much neater, and you have a very clear context. The .map() way works too; but your code can easily get bloated and its harder to manage.