Angular中如何合并多个Observable的查询结果？（英雄示例场景）

基于Angular官方英雄示例，现有searchHeroes方法仅支持按name查询Hero。需扩展为支持按name、address等多属性查询，但无法修改后端API。尝试创建两个分别查询name和address的Observable并直接相加，因Observable并非字符串导致失败，咨询如何合并这两个Observable的查询结果？

原示例代码：

/* GET heroes whose name contains search term */
searchHeroes(term: string): Observable<Hero[]> {
  if (!term.trim()) {
    // if not search term, return empty hero array.
    return of([]);
  }
  return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
    tap(x => x.length ?
       this.log(`found heroes matching "${term}"`) :
       this.log(`no heroes matching "${term}"`)),
    catchError(this.handleError<Hero[]>('searchHeroes', []))
  );
}

尝试的错误修改代码：

/* GET heroes whose name contains search term */
searchHeroes(term: string): Observable<Hero[]> {
  if (!term.trim()) {
    // if not search term, return empty hero array.
    return of([]);
  }
  var names = this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
    tap(x => x.length ?
       this.log(`found heroes matching "${term}"`) :
       this.log(`no heroes matching "${term}"`)),
    catchError(this.handleError<Hero[]>('searchHeroes', []))
  );
  var addresses = this.http.get<Hero[]>(`${this.heroesUrl}/?address=${term}`).pipe(
    tap(x => x.length ?
       this.log(`found heroes matching "${term}"`) :
       this.log(`no heroes matching "${term}"`)),
    catchError(this.handleError<Hero[]>('searchHeroes', []))
  );
  return names + addresses;
}

不能直接用+运算符合并Observable，需使用RxJS提供的合并操作符，以下是两种常用实现方式：

方式一：用forkJoin并行请求后合并结果 #

forkJoin会等待所有请求完成，将结果收集为数组，后续可合并数组并去重（避免同一英雄因同时匹配name和address重复出现）。

修改后的代码：

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

/* GET heroes whose name or address contains search term */
searchHeroes(term: string): Observable<Hero[]> {
  if (!term.trim()) {
    return of([]);
  }

  const nameQuery$ = this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
    tap(x => x.length ?
      this.log(`found heroes matching name "${term}"`) :
      this.log(`no heroes matching name "${term}"`)),
    catchError(this.handleError<Hero[]>('searchHeroes by name', []))
  );

  const addressQuery$ = this.http.get<Hero[]>(`${this.heroesUrl}/?address=${term}`).pipe(
    tap(x => x.length ?
      this.log(`found heroes matching address "${term}"`) :
      this.log(`no heroes matching address "${term}"`)),
    catchError(this.handleError<Hero[]>('searchHeroes by address', []))
  );

  return forkJoin([nameQuery$, addressQuery$]).pipe(
    map(([nameResults, addressResults]) => {
      // 合并数组并按id去重（假设Hero有唯一id属性）
      const combined = [...nameResults, ...addressResults];
      return Array.from(new Map(combined.map(hero => [hero.id, hero])).values());
    })
  );
}

方式二：用merge实时合并结果（适合流式场景） #

若希望每一个请求返回结果时就立即推送给订阅者，可使用merge，同样需要处理重复数据：

import { merge, of } from 'rxjs';
import { distinctUntilChanged, scan } from 'rxjs/operators';

/* GET heroes whose name or address contains search term */
searchHeroes(term: string): Observable<Hero[]> {
  if (!term.trim()) {
    return of([]);
  }

  const nameQuery$ = this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
    tap(x => x.length ?
      this.log(`found heroes matching name "${term}"`) :
      this.log(`no heroes matching name "${term}"`)),
    catchError(this.handleError<Hero[]>('searchHeroes by name', []))
  );

  const addressQuery$ = this.http.get<Hero[]>(`${this.heroesUrl}/?address=${term}`).pipe(
    tap(x => x.length ?
      this.log(`found heroes matching address "${term}"`) :
      this.log(`no heroes matching address "${term}"`)),
    catchError(this.handleError<Hero[]>('searchHeroes by address', []))
  );

  return merge(nameQuery$, addressQuery$).pipe(
    scan((acc, heroes) => {
      // 合并当前结果到累计数组并去重
      const combined = [...acc, ...heroes];
      return Array.from(new Map(combined.map(hero => [hero.id, hero])).values());
    }, [] as Hero[]),
    distinctUntilChanged()
  );
}

关键说明 #

• 必须使用RxJS操作符合并Observable，不能直接用+运算
• 合并后需去重，避免同一英雄多次返回（可根据Hero的实际唯一标识调整去重逻辑）
• forkJoin适合等待所有请求完成后返回完整结果的场景；merge适合实时获取部分结果的场景

内容的提问来源于stack exchange，提问作者Jason Michael