如何在Angular pipe中异步设置变量 实现接口请求完成后更新loading状态

核心问题在于你没有等待this.apiService.exportReport这个异步请求执行完成就修改了isLoading状态，我们可以直接通过RxJS的管道操作符串联异步流实现需求，不需要额外创建Service。

调整后完整代码 #

public exportReportResults(format: ExportFormat) {
  this.isLoading = true;
  this.sink.add(
    this.service.context.pipe(
      filter(value => !!value),
      // 切换到导出请求的异步流
      switchMap(data => {
        const items: any[] = [];
        data.context.groups.forEach(group => {
          items.push(group.items.map(({ id }) => id));
        });
        const itemQuery: string = "'{'" + items.toString() + "'}";
        return this.apiService.exportReport(format, itemQuery);
      }),
      // 无论请求成功/失败/取消，都会关闭loading
      finalize(() => {
        this.isLoading = false;
      })
    ).subscribe({
      // 可在这里处理请求成功的逻辑，比如提示导出成功
      next: res => console.log('导出成功', res),
      // 可在这里处理请求失败的逻辑，比如提示导出失败
      error: err => console.error('导出失败', err)
    })
  );
}

关键说明 #

• 提前导入依赖的RxJS操作符：

  import { filter, switchMap, finalize } from 'rxjs/operators';
  // 如果是RxJS7+版本也可以使用链式导入语法
  

• 如果你的apiService.exportReport返回的是Promise而非Observable，只需要用from(this.apiService.exportReport(format, itemQuery))包裹返回值即可正常配合switchMap使用
• finalize操作符保证无论请求的最终状态如何，都会执行关闭loading的逻辑，避免出现按钮一直处于加载状态的异常
• 所有订阅统一加入sink管理，不会产生额外的内存泄漏问题

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