Angular 5链式API调用获取大对象并实现UI进度反馈与取消功能

Absolutely, RxJS Observables are exactly what you need here—they’re designed to handle cancellable, state-aware asynchronous workflows like this. Let’s walk through a practical implementation tailored to your Angular 5 setup:

We’ll use a combination of RxJS operators to:

1. Launch parallel API requests for different BCA sections
2. Emit progress updates as each section loads
3. Cancel all in-flight requests immediately when the user navigates away

1. Set Up the BCA Service with Progress Tracking #

First, create a service to encapsulate your API calls. Each call will emit a progress update (loading/loaded) before and after execution:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class BcaService {
  constructor(private http: HttpClient) {}

  // Helper method to standardize progress emissions
  private fetchWithProgress<T>(
    url: string,
    sectionKey: string,
    progressSubject: Subject<{key: string, status: 'loading' | 'loaded'}>
  ): Observable<T> {
    progressSubject.next({ key: sectionKey, status: 'loading' });
    return this.http.get<T>(url).pipe(
      tap(() => progressSubject.next({ key: sectionKey, status: 'loaded' }))
    );
  }

  // Individual section fetch methods
  fetchHomeSummary(bcaId: string, progress$: Subject<any>) {
    return this.fetchWithProgress(
      `/api/bca/${bcaId}/home/summary`,
      'home/summary',
      progress$
    );
  }

  fetchHomeDate(bcaId: string, progress$: Subject<any>) {
    return this.fetchWithProgress(
      `/api/bca/${bcaId}/home/date`,
      'home/date',
      progress$
    );
  }

  fetchHomeLoad(bcaId: string, progress$: Subject<any>) {
    return this.fetchWithProgress(
      `/api/bca/${bcaId}/home/load`,
      'home/load',
      progress$
    );
  }

  fetchAuditSummary(bcaId: string, progress$: Subject<any>) {
    return this.fetchWithProgress(
      `/api/bca/${bcaId}/audit/summary`,
      'audit/summary',
      progress$
    );
  }
}

2. Component Implementation: Parallel Execution & UI Updates #

In your main BCA component, we’ll:

• Track loading states for each section
• Launch all API requests in parallel
• Cancel requests when the component is destroyed (user navigates away)

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BcaService } from './bca.service';
import { Observable, Subject, merge } from 'rxjs';
import { takeUntil, scan } from 'rxjs/operators';

@Component({
  selector: 'app-bca-detail',
  template: `
    <div class="section-tabs">
      <button 
        class="tab-btn"
        [class.loaded]="loadingStatus['home/summary'] === 'loaded'"
        [class.loading]="loadingStatus['home/summary'] === 'loading'"
        routerLink="./home/summary"
      >
        Summary 
        <span *ngIf="loadingStatus['home/summary'] === 'loading'">(Loading...)</span>
      </button>
      <button 
        class="tab-btn"
        [class.loaded]="loadingStatus['home/date'] === 'loaded'"
        [class.loading]="loadingStatus['home/date'] === 'loading'"
        routerLink="./home/date"
      >
        Date 
        <span *ngIf="loadingStatus['home/date'] === 'loading'">(Loading...)</span>
      </button>
      <!-- Repeat for other tabs -->
    </div>

    <div class="progress-bar">
      <div class="progress-fill" [style.width.%]="overallProgress"></div>
    </div>

    <router-outlet></router-outlet>
  `,
  styles: [`
    .loaded { color: green; }
    .loading { color: orange; }
    .progress-bar { height: 4px; background: #eee; margin: 1rem 0; }
    .progress-fill { height: 100%; background: #2196F3; transition: width 0.3s; }
  `]
})
export class BcaDetailComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  private progress$ = new Subject<{key: string, status: 'loading' | 'loaded'}>();
  
  loadingStatus: Record<string, 'initial' | 'loading' | 'loaded'> = {
    'home/summary': 'initial',
    'home/date': 'initial',
    'home/load': 'initial',
    'audit/summary': 'initial'
  };
  overallProgress = 0;
  private totalSections = Object.keys(this.loadingStatus).length;
  bcaId!: string;

  constructor(
    private route: ActivatedRoute,
    private bcaService: BcaService
  ) {}

  ngOnInit() {
    this.bcaId = this.route.snapshot.paramMap.get('id')!;

    // Track progress updates and update UI state
    this.progress$.pipe(
      takeUntil(this.destroy$),
      scan((state, update) => {
        // Update individual section status
        const newStatusMap = {...state.statusMap, [update.key]: update.status};
        // Calculate overall progress percentage
        const loadedCount = Object.values(newStatusMap).filter(s => s === 'loaded').length;
        const progressPercent = Math.round((loadedCount / this.totalSections) * 100);
        
        return { statusMap: newStatusMap, progressPercent };
      }, { statusMap: this.loadingStatus, progressPercent: 0 })
    ).subscribe(({ statusMap, progressPercent }) => {
      this.loadingStatus = statusMap;
      this.overallProgress = progressPercent;
    });

    // Launch all parallel API requests
    const allSectionRequests = [
      this.bcaService.fetchHomeSummary(this.bcaId, this.progress$),
      this.bcaService.fetchHomeDate(this.bcaId, this.progress$),
      this.bcaService.fetchHomeLoad(this.bcaId, this.progress$),
      this.bcaService.fetchAuditSummary(this.bcaId, this.progress$)
    ];

    // Execute in parallel and listen for cancellation
    merge(...allSectionRequests).pipe(
      takeUntil(this.destroy$)
    ).subscribe({
      error: (err) => {
        // Handle errors (e.g., mark section as failed)
        console.error('Failed to load BCA section:', err);
      }
    });
  }

  ngOnDestroy() {
    // Trigger cancellation of all in-flight requests
    this.destroy$.next();
    this.destroy$.complete();
    this.progress$.complete();
  }
}

3. Key RxJS Operators Explained #

Let’s break down the critical operators making this work:

• takeUntil(this.destroy$): This operator listens for a signal from destroy$ (emitted when the component is destroyed) and immediately cancels all active subscriptions—stopping in-flight API requests instantly.
• merge(...allSectionRequests): Launches all API observables in parallel, instead of waiting for one to finish before starting the next.
• scan: Accumulates progress updates over time, allowing us to build a complete state object for the UI (individual section status + overall progress percentage).
• tap: Emits progress updates without modifying the API response data—perfect for side effects like UI state changes.

4. Optional: Route Guard for Extra Safety #

If you want to ensure cancellation even if the component destruction lifecycle is skipped (edge cases), add a CanDeactivate guard:

import { CanDeactivate } from '@angular/router';
import { BcaDetailComponent } from './bca-detail.component';
import { Observable } from 'rxjs';

export class BcaDeactivateGuard implements CanDeactivate<BcaDetailComponent> {
  canDeactivate(component: BcaDetailComponent): Observable<boolean> | boolean {
    component.ngOnDestroy();
    return true;
  }
}

Register this guard in your routing module for the BCA routes.

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