Angular中使用HttpClient请求数据时如何正确展示加载Spinner？

你的原始思路合理性说明 #

你原本的实现思路在单组件、单次独立请求的场景下是完全可用的，唯一的疏漏是没有处理请求异常的情况：如果接口请求报错，subscribe的next回调不会执行，你的loading变量会一直为true，导致Spinner永久显示。

两种常用实现方案 #

方案1：组件内独立控制（适合单请求、个性化loading的场景） #

这是最轻量化的实现，只需要对你现有的代码做少量修改即可：

1. 组件中定义loading变量，初始值设为true
2. 补充subscribe的error和complete回调，确保无论请求成功失败，都把loading置为false
3. 模板中通过loading变量控制Spinner的显示隐藏

组件TS代码修改示例：

loading = true;
menuComponibile: MenuComponibile[] = [];

ngOnInit(): void {
  this.menuComponibileService
  .getMenuComponibile(this.idNegozio.toString(), this.piva, 'IT', this.tipo, this.plu.id)
  .subscribe({
    next: (data) => {
      this.menuComponibile = data;
    },
    error: (err) => {
      // 可自行补充错误提示逻辑
      console.error('菜单数据加载失败', err);
    },
    complete: () => {
      // 无论请求成功/失败都会触发complete回调，统一重置loading状态
      this.loading = false;
    }
  });
}

模板代码示例：

<!-- Spinner组件，loading为true时显示 -->
<app-spinner *ngIf="loading"></app-spinner>
<!-- 数据加载完成后展示实际内容 -->
<div *ngIf="!loading">
  <!-- 你的菜单渲染逻辑 -->
</div>

方案2：全局拦截器统一控制（适合全应用大量请求需要通用loading的场景） #

如果你的应用中多个接口都需要展示loading状态，每个组件单独写逻辑会非常冗余，这时候可以用Angular的HTTP拦截器统一监听所有请求的生命周期，配合全局服务管理loading状态。

实现步骤

1. 创建全局LoadingService管理loading状态

@Injectable({ providedIn: 'root' })
export class LoadingService {
  private loadingSubject = new BehaviorSubject<boolean>(false);
  public loading$ = this.loadingSubject.asObservable();
  private requestCount = 0;

  // 发起请求时调用
  show(): void {
    this.requestCount++;
    this.loadingSubject.next(true);
  }

  // 请求结束时调用
  hide(): void {
    this.requestCount--;
    if (this.requestCount <= 0) {
      this.requestCount = 0;
      this.loadingSubject.next(false);
    }
  }
}

2. 创建HTTP拦截器，拦截所有请求

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
  constructor(private loadingService: LoadingService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    this.loadingService.show();
    return next.handle(request).pipe(
      tap({
        complete: () => this.loadingService.hide(),
        error: () => this.loadingService.hide()
      })
    );
  }
}

3. 在AppModule中注册拦截器

@NgModule({
  // 其他配置省略
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true }
  ]
})
export class AppModule { }

4. 在需要展示loading的组件中直接订阅全局状态即可

// 组件TS
loading$ = this.loadingService.loading$;
constructor(private loadingService: LoadingService) {}

<!-- 组件模板 -->
<app-spinner *ngIf="loading$ | async"></app-spinner>

如果有个别接口不需要展示loading，在拦截器中添加对应URL的过滤逻辑即可。

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