来自多个HTTP请求的RxJs / Angular加载以及每个请求的更新模型

Question

I have been using Angular/RxJS for a few weeks and have various models that are built from multiple REST requests which I have thus far achieved using switchMap(). Here is a simple contrived example (stackblitz: https://stackblitz.com/edit/angular-o1djbb ):

import { Component, OnInit, } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay, switchMap } from 'rxjs/operators';

interface Order {
  id: string;
  itemName: string;
  details?: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  order: Order;

  ngOnInit() {
    this.getOrderFromApi(123)
      .subscribe(item => this.order = item);
  }

  getOrderFromApi(id): Observable<Order>  {
    const item$ = this.getItemName(id);
    const fullItem$ = item$.pipe(
      switchMap(n => {
        console.log(`Got name: '${n}''`);
        return this.getDetails(n);
      },
        (nameReq, detailsReq) => ({ id: '123', itemName: nameReq, details: detailsReq })
      ));
    return fullItem$;
  }

  getItemName(id): Observable<string> {
    return this.fakeXhr('foo');
  }

  getDetails(itemName): Observable<string> {
    console.log(`Got details '${itemName}''`)
    return this.fakeXhr('Some details about foo');
  }

  fakeXhr(payload: any) {
    return of(payload)
      .pipe(delay(2000));
  }
}

And a simple template:

<p>
  item: {{order && order.itemName}}
</p>
<p>
  details: {{order && order.details}}
</p>

This works but the order info is not rendered until both requests complete. What I would like to happen is for the itemName to render as soon as it's available and then details to render when they become available. Hence taking advantage of the multiple values that Observables can emit. Eg:

// first value emitted:
{ itemName: 'foo', details: null }
// second value emitted:
{ itemName: 'foo', details: 'Some details about foo' }

I realise I could probably achieve this with a BehaviourSubject or using Redux (as I have in the past with React), but feel there is a simple solution I can't quite grasp due to the newness of all this for me.

Answer 1

Use expand to emit the data from the first request straight away and subsequently do the second request.

expand will call the inner request recursively, getting the order from the last request as input, so we only execute the second request when the order has no details and end the recursion otherwise with an EMPTY Observable.

import { Observable, EMPTY } from 'rxjs';
import { map, expand } from 'rxjs/operators';

getOrderFromApi(id): Observable<Order> {
  return this.getItemName(id).pipe(
    map(itemName => ({ id, itemName, details: null } as Order)),
    expand(order => order.details
      ? EMPTY
      : this.getDetails(order.itemName).pipe(
        map(details => ({ id, itemName: order.itemName, details } as Order))
      )
    )
  );
}

https://stackblitz.com/edit/angular-umqyem

The returned Observable will emit:

1. { "id": 123, "itemName": "foo", "details": null }
2. { "id": 123, "itemName": "foo", "details": "Some details about foo" }

Answer 2

Maybe your best choice is to substitute mergeMap() for switchMap() ?

https://blog.angular-university.io/rxjs-higher-order-mapping/

As we can see, the values of the merged source Observables show up immediately in the output. The result Observable will not be completed until all the merged Observables are completed.

I would definitely check out these articles:

• Comprehensive Guide to Higher-Order RxJs Mapping Operators: switchMap, mergeMap, concatMap (and exhaustMap) (cited above)

• RxJS: When to Use switchMap

Answer 3

Instead of persisting your full item at the end of the observable stream (ie in your .subscribe block) you could store the received values within the respective parts of your code, namely after they are available:

 switchMap(n => {
        console.log(`Got name: '${n}''`);
        this.order.name = n;
        return this.getDetails(n);
      },

... and then in your sibscription block you would only have to store the advanced information:

this.getOrderFromApi(123)
      .subscribe(item => this.order.details = item.details);

Obviously, this requires you to initialize your ´order´ attribute accordingly, eg with order: Order = {}; or order: Order = new Order(); .

Basically, the idea is to restructure your code st your observable stream emits partial values (your order's attributes) instead of a full-blown object.

Answer 4

One solution I did come up with was to just create an Observable and call next(). I'd be interested to hear any opinion on this.

getOrder(id) {
    const ob$ = new Observable(subscriber => {
      const item$ = this.getItem(id)
        .pipe(
          tap(o => subscriber.next(({ id: id, itemName: o.itemName, details: null }))),
          switchMap(o => this.getDetails(o.itemName),
            (o, d) => ({ id: id, itemName: o.itemName, details: d.details })
          ),
          tap(a => subscriber.next(a))
        );
      item$.subscribe(a => {
        subscriber.complete();
      });
    });

    return ob$;
  }

Stackblitz: https://stackblitz.com/edit/angular-mybvli