如何判断Angular异步操作是否处于Pending状态？实现状态区分提示

这个问题我之前也碰到过！确实，只用async管道的话，没法区分“正在加载”和“真的没数据”这两种情况——当Observable处于pending状态时，async管道不会返回任何值，都会直接走到else块里，导致两种状态混在一起。下面给你两种实用的解决方案：

方案一：用状态包装Observable（推荐） #

这种方法通过创建一个包含状态信息的接口，把加载、数据、错误状态都包装到一个Observable里，逻辑清晰且只需订阅一次。

步骤1：定义状态接口 #

在组件文件里先定义一个通用的状态接口，用来封装异步操作的各种状态：

interface DataState<T> {
  loading: boolean;
  data?: T[];
  error?: string;
}

// 假设你的数据项类型是这样的
interface Item {
  name: string;
}

步骤2：转换Observable为带状态的流 #

在组件类里，把获取数据的Observable转换成包含状态的流，用startWith标记初始加载状态，map处理成功数据，catchError处理错误：

import { Observable, of, startWith, map, catchError } from 'rxjs';
import { ItemService } from './item.service'; // 假设你的数据服务

@Component({
  // 组件元数据
})
export class YourComponent {
  itemsState$: Observable<DataState<Item>>;

  constructor(private itemService: ItemService) {}

  ngOnInit() {
    this.itemsState$ = this.itemService.getItems().pipe(
      // 数据加载成功：标记加载完成，携带数据
      map(data => ({ loading: false, data })),
      // 初始状态：标记为加载中
      startWith({ loading: true }),
      // 捕获错误：标记加载完成，携带错误信息
      catchError(error => of({ loading: false, error: error.message }))
    );
  }
}

步骤3：模板中根据状态渲染内容 #

在模板里订阅这个带状态的Observable，分别处理加载、错误、有数据、无数据四种情况：

<div *ngIf="itemsState$ | async as state">
  <!-- 加载状态 -->
  <div *ngIf="state.loading" class="loading">Loading items...</div>

  <!-- 错误状态 -->
  <div *ngIf="!state.loading && state.error" class="error">
    Oops, failed to load items: {{ state.error }}
  </div>

  <!-- 数据状态 -->
  <div *ngIf="!state.loading && !state.error">
    <!-- 有数据时展示列表 -->
    <div *ngIf="state.data && state.data.length > 0">
      There are {{ state.data.length }} items
      <div *ngFor="let item of state.data" class="item">
        {{ item.name }}
      </div>
    </div>
    <!-- 无数据时展示提示 -->
    <div *ngIf="!state.data || state.data.length === 0" class="empty">
      Unfortunately there are no items
    </div>
  </div>
</div>

方案二：单独维护加载状态Observable #

如果不想用状态包装，也可以单独定义一个isLoading$的Observable来跟踪加载状态，和数据Observable配合使用：

组件类代码 #

import { Observable, of, tap, catchError } from 'rxjs';
import { BehaviorSubject } from 'rxjs';
import { ItemService } from './item.service';

@Component({
  // 组件元数据
})
export class YourComponent {
  isLoading$ = new BehaviorSubject<boolean>(true);
  items$: Observable<Item[]>;

  constructor(private itemService: ItemService) {}

  ngOnInit() {
    this.items$ = this.itemService.getItems().pipe(
      // 数据加载完成后标记加载状态为false
      tap(() => this.isLoading$.next(false)),
      // 错误时也标记加载完成，并返回空数组
      catchError(() => {
        this.isLoading$.next(false);
        return of([]);
      })
    );
  }
}

模板代码 #

<!-- 有数据时展示列表 -->
<div *ngIf="items$ | async as items; else loadingOrEmpty">
  There are {{ items.length }} items
  <div *ngFor="let item of items">{{ item.name }}</div>
</div>

<!-- 加载或无数据的模板 -->
<ng-template #loadingOrEmpty>
  <div *ngIf="isLoading$ | async">Loading items...</div>
  <div *ngIf="!(isLoading$ | async)">Unfortunately there are no items</div>
</ng-template>

这两种方法都能完美区分加载状态和无数据状态，方案一更推荐，因为它把所有状态都封装在一个Observable里，避免了多个订阅可能带来的冗余逻辑。

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