如何將可觀察變量數組合並為具有相同返回類型的單個可觀察變量

Question

我要實現的目標是在數組中推送一些http請求的可觀察對象，然后將所有響應組合在一起並返回一個可觀察對象。

由於所有http請求都以相同的類型'User'進行解析，因此我只想等待它們全部解析，然后我可以從getUsers（）函數返回一個包含所有Users的可觀察對象。

我被困在return merge(observableRequests)部分，因為我無法正確獲得返回類型，而且我不太熟悉Rxjs函數。

這是我的三個相關功能。

    getMyUser(): Observable<User> {
        return this.service.get(`${this._userPath}me`).pipe(
            map((serviceUser: any) => {
                return parseUser(serviceUser);
            }));
    }

    getUsers(): Observable<User[]> {
        return this.getMyUser()
            .pipe(switchMap((user: User) => {
                const activeProvidersIds = this._getActiveProvidersIds(user.providers);
                const observableRequests = activeProvidersIds.map((id: number) => this.getUserRequest(id));
                return merge(observableRequests);
            }));
    }

    getUserRequest(facDbk: number): Observable<User[]> {
        return this.service.get(`${this._providerPath}${facDbk}/users`).pipe(
            map((serviceUsers: any) => {
                return parseUsers(serviceUsers);
            })
        );
    }

任何幫助表示贊賞。

Answer 1

我猜你在找forkJoin ：

When all observables complete, emit the last emitted value from each.

https://www.learnrxjs.io/operators/combination/forkjoin.html

這是一個可以幫助您的示例：

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

Answer 2

ForkJoin將在您的用例中工作，您可以遵循此代碼

import { Observable, of, forkJoin } from 'rxjs'; 
import { map } from 'rxjs/operators';

interface user {
  id : string;
  name: string;
}

// mimicking api requests
const httpRequest = (num): Observable<user> =>{
  return Observable.create((observer)=>{
    const [id,name] = [`id-${num}`,`name-${num}`];
    setTimeout(()=>{
     observer.next({id,name});
     observer.complete();
    },num*1000);
  });
}

//push array of request observables and return single observable
// you can push any number of request here 
const makeRequestInParallel = ():Observable<user> =>{
  const reqs:Observable<user>[] = [httpRequest(1),httpRequest(2),httpRequest(3)];
  return forkJoin(...reqs);
}


makeRequestInParallel().subscribe((result)=>{
  console.log(result);
});

單擊穩定鏈接