如何首次获取Firestore Observable的有效订阅值？

你遇到的问题是因为服务中getUserList()返回的Observable先发射了空数组作为初始值，之后才发射完整的用户数据。这种情况最常见的原因是服务内部用了BehaviorSubject并将初始值设为空数组——BehaviorSubject的特性就是订阅后立即发射当前持有的值，所以首次订阅会先收到空数组，等到真实数据加载完成后再发射完整数组。

下面是几种优化方案，按需选择：

方案1：修改服务内部的Subject类型（推荐） #

把服务里的BehaviorSubject换成ReplaySubject(1)，它会缓存最新的1次发射值，但不会有初始空值，新订阅只会收到真实加载完成后的用户数据。

假设服务代码原本是这样：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class UnitLogService {
  private usersSubject = new BehaviorSubject<any[]>([]); // 初始空数组导致首次订阅收到空值
  private users$ = this.usersSubject.asObservable();

  constructor(private http: HttpClient) {}

  getUserList(): Observable<any[]> {
    this.http.get<any[]>('/api/users').subscribe(data => {
      this.usersSubject.next(data);
    });
    return this.users$;
  }
}

修改为：

import { Injectable } from '@angular/core';
import { ReplaySubject, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class UnitLogService {
  private usersSubject = new ReplaySubject<any[]>(1); // 缓存最新1次值，无初始空值
  private users$ = this.usersSubject.asObservable();

  constructor(private http: HttpClient) {}

  getUserList(): Observable<any[]> {
    this.http.get<any[]>('/api/users').subscribe(data => {
      this.usersSubject.next(data);
    });
    return this.users$;
  }
}

方案2：在订阅时过滤空数组 #

如果不想修改服务，可在组件订阅时用RxJS的filter操作符过滤掉空数组，只处理有数据的回调：

import { filter } from 'rxjs/operators';

// ...组件内代码
getData() {
  this.usersList = this.unitLogSevice.getUserList();
  this.usersList.pipe(
    filter(res => res.length > 0) // 只接收长度大于0的数组
  ).subscribe((res: any) => { 
    console.log("res", res);
  });
}

方案3：直接返回HTTP请求Observable（更简洁） #

如果服务不需要维护用户数据的状态，只是单纯获取一次数据，可直接返回HTTP请求的Observable，并加上shareReplay避免重复请求：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { shareReplay } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class UnitLogService {
  constructor(private http: HttpClient) {}

  getUserList(): Observable<any[]> {
    return this.http.get<any[]>('/api/users').pipe(
      shareReplay(1) // 缓存请求结果，后续订阅直接复用
    );
  }
}

这种方式下，Observable只会在HTTP请求成功后发射一次完整数据，不会有初始空值，同时还能避免多次调用getUserList()时重复发起请求。

内容的提问来源于stack exchange，提问作者Thomas Degroot