加载多个Subscription时进度指示器的优化方案问询

针对你的两个需求，我们可以通过统计请求总数、跟踪已完成请求数来实现自动计算进度，同时确保第一个请求完成后才开始更新进度。下面是重构后的代码：

模板部分 #

<div *ngIf="!loaded" class="splash">
  <div>
    <div class="loader"></div>
    <div class="progress">{{ progress | number:'1.0-0' }}%</div>
  </div>
</div>
<div *ngIf="loaded" class="container">
  <!-- 内容区域 -->
</div>

组件部分 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { combineLatest, Subscription, tap } from 'rxjs';
import { ToolApiService } from './path-to-tool-api.service';
// 请根据实际路径导入其他服务

@Component({
  selector: 'app-pages',
  templateUrl: './pages.component.html',
  styleUrls: ['./pages.component.css']
})
export class PagesComponent implements OnInit, OnDestroy {
  public loaded: boolean = false;
  private subscription$!: Subscription;
  public progress: number = 0;
  private totalRequests: number = 0;
  private completedRequests: number = 0;
  private progressIncrement: number = 0;

  constructor(
    private toolService: ToolApiService,
    private toolSetService: ToolSetApiService,
    private orderApiService: OrderApiService,
    private stockRequestService: StockRequestService,
    private fastenerService: FastenerService,
    private usersService: UserService,
    private organisationMachineApiService: OrganizationMachineApiService,
  ) {}

  ngOnInit() {
    // 整理所有需要加载的请求
    const loadRequests = [
      this.toolService.getAll(),
      this.toolSetService.getAll(),
      this.orderApiService.findAll(),
      this.stockRequestService.findAll(),
      this.usersService.getIvmUserList(),
      this.organisationMachineApiService.getAll(),
      this.fastenerService.findAll()
    ];

    // 统计总请求数，自动计算单个请求对应的进度增量
    this.totalRequests = loadRequests.length;
    this.progressIncrement = 100 / this.totalRequests;

    // 给每个请求添加完成后更新进度的逻辑
    const trackedRequests = loadRequests.map(request => 
      request.pipe(
        tap(() => {
          this.completedRequests++;
          // 第一个请求完成后才开始更新进度
          if (this.completedRequests >= 1) {
            // 限制进度最大为99%，留到所有请求完成后再设为100%
            this.progress = Math.min(this.completedRequests * this.progressIncrement, 99);
          }
        })
      )
    );

    // 合并所有请求，完成后设置最终状态
    this.subscription$ = combineLatest(trackedRequests).subscribe(() => {
      this.progress = 100;
      // 可选：延迟隐藏加载屏，让用户看到100%的状态
      setTimeout(() => {
        this.loaded = true;
      }, 300);
    });
  }

  ngOnDestroy() {
    this.subscription$.unsubscribe();
  }
}

关键修改说明 #

• 自动计算进度增量：通过统计请求数组的长度得到总请求数，用100 / totalRequests自动算出单个请求对应的进度占比，无需手动配置。
• 第一个请求完成后才计数：用completedRequests跟踪已完成的请求数，只有当计数≥1时才更新进度，确保初始状态进度保持0。
• 移除定时器：直接在每个请求完成时同步更新进度，比定时器更准确，彻底解决手动设置间隔的问题。
• 进度合理性控制：将中间进度限制在99%，所有请求完成后再设置为100%，避免单个请求完成后进度直接跳满的突兀感。

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