RxJs加载Spinner在Observable无返回数据时如何自动取消的咨询

解决方案 #

核心思路是通过RxJs的defaultIfEmpty操作符捕获空数据流的场景，主动发出默认值触发async管道更新，无需依赖超时逻辑，完全匹配请求的实际生命周期。

第一步：修改TS代码，补充空流默认值 #

给你的Observable管道追加defaultIfEmpty操作符，当源流没有发出任何next事件就直接结束时，会自动发出你设定的默认值（这里设为空数组）：

// component.ts
import { defaultIfEmpty } from 'rxjs/operators'; // 未全局导入操作符时需要手动引入

myObservable$;

ngOnInit(): void {
  const myArray = [1, 2, 3, 4];
  // const myArray = [];

  this.myObservable$ = from(myArray).pipe(
    bufferCount(10),
    concatMap((item) => of(item).pipe(delay(3000))),
    // 新增以下代码，空流时默认返回空数组
    defaultIfEmpty([])
  );
}

第二步：修改模板，增加空数据分支判断 #

拿到Observable返回的值后，通过数组长度区分有数据/无数据场景：

<!-- component.html -->
<div *ngIf="myObservable$ | async as myObservable; else spinner">
  <ng-container *ngIf="myObservable.length; else noData">
    <div *ngFor="let item of myObservable">item: {{ item }}</div>
  </ng-container>
  <ng-template #noData>
    暂无数据
  </ng-template>
</div>
<ng-template #spinner>
  Spinner
</ng-template>

适配Firebase场景说明 #

如果你使用的是Firebase集合查询的实时流（比如valueChanges/snapshotChanges），空集合本身会主动返回空数组，一般不会出现空流问题。如果你在管道中加了filter等操作符过滤掉了空值，只需要在管道末尾追加上述defaultIfEmpty([])即可覆盖所有场景。

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