将Observable中的值推送到Observable

Posted 2021-04-18

我有两个不同的API端点。一个返回一个Cards对象，另一个返回一个Cards对象数组。我想要做的是从第二个端点获取第一个Card作为Array中的第一个元素。有没有办法做到这一点？两者都是从HTTPClient返回的可观察量，所以也许对某些算子来说很简单，但我还不知道这样做。只是为了更好地说明：

我有：

latestCards$: Observable<Cards> = http.get('latestCardsEndpoint');
// { title: 'Latest', cards: [], ... }  

featuredCards$: Observable<Cards[]> = http.get('featuredCardsEndpoint');
// [
//   { title: 'Featured1', cards: [], ... }, 
//   { title: 'Featured2', cards: [], ... },
//   ...
// ]

我需要

homeCards$: Observable<Cards[]>;
// [
//   { title: 'Latest', cards: [], ... },
//   { title: 'Featured1', cards: [], ... },
//   { title: 'Featured2', cards: [], ... },
//   ...
// ]

答案

当然：

天真的方法：

import {forkJoin} from 'rxjs/observable/forkJoin';
import {map} from 'rxjs/operators';

homeCards$= forkJoin(latestCards$,featuredCards$).pipe(
  map(([latest,feature]=>[latest,...feature])
);

这有一个限制：等待两个请求完成以发出第一个值，即完整列表。

天真的方法2：

import {combineLatest} from 'rxjs/observable/combineLatest';
import {map} from 'rxjs/operators';

homeCards$= combineLatest(latestCards$,featuredCards$).pipe(
  map(([latest,feature]=>[latest,...feature])
);

与之前相同的限制，只是它等待两个流至少发射一次。因为这些是http observables，它们只发出一次（响应）然后完成。所以它是一样的。

更好的方法：

假设latestCard $请求花费的时间较少，请在后台获取其余数据时将其用作第一个结果。

import {merge} from 'rxjs/observable/merge';
import {of} from 'rxjs/observable/of';
import {mergeMap, map}from'rxjs/operators';

homeCards$= latestCards$.mergeMap(latest => {
            const fullResult$ = featuredCards$.map(featured => [latest,...featured]);
            return merge(of([latest], fullResult$);
            });

另一答案

有很多方法可以解决这个问题，一个是这样的：

Observable
    .combineLatest(latestCards$, featuredCards$) // return an array of responses
    .map(([lastestCard, featuredCards]) => [lastestCard, ...featuredCards])
    .subscribe(// do your stuff)

这是jsfiddle中的一个例子：http://jsfiddle.net/foxfghhn/