Angular中Header组件API请求偶发取消问题求助

问题根源分析 #

1. Router Events订阅未清理：Header组件中订阅路由事件后未销毁订阅，导致路由变化时多次触发请求，旧请求被浏览器/Angular自动取消
2. 无请求缓存机制：重复调用API时会发起新请求，旧未完成请求被取消
3. 路由参数获取时机不当：使用静态路由快照获取参数，可能拿到旧值或触发重复请求
4. 订阅未生命周期管理：组件内HTTP请求订阅未销毁，引发内存泄漏和重复请求

具体修复步骤 #

1. 修复路由事件订阅的生命周期 #

在Header组件中添加销毁信号，确保路由事件订阅随组件销毁而取消，避免重复触发请求：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class HeaderComponent {
  private destroy$ = new Subject<void>(); // 新增销毁信号

  constructor(...) {
    // ... 原有初始化代码

    this.router.events.pipe(
      filter((event): event is NavigationEnd => event instanceof NavigationEnd),
      takeUntil(this.destroy$) // 组件销毁时自动取消订阅
    ).subscribe(next => {
      // 改用动态参数订阅获取最新路由参数
      this.route.firstChild?.params.pipe(takeUntil(this.destroy$)).subscribe(params => {
        this.currentCompanyId = params['defaultCompanyId'];
        this.getHomeData();
      });
    });
  }

  ngOnDestroy() {
    // 发送销毁信号，清理所有订阅
    this.destroy$.next();
    this.destroy$.complete();
  }

  // ... 原有其他代码
}

2. 给API请求添加缓存，避免重复发起 #

为UserService和CompanyService的重复请求添加缓存，复用已有请求结果：

修改UserService

@Injectable({ providedIn: 'root' })
export class UserService {
  public sharedDataForCompanies$: Observable<any>;
  private userName$: Observable<any>;
  private user$: Observable<any>;

  // ... 原有代码

  getPersonName(): Observable<any> {
    if (!this.userName$) {
      this.userName$ = this.http.get<any>("/Users/GetName/")
        .pipe(
          shareReplay(1), // 缓存请求结果
          catchError(this.handleError<any>('getUserName', []))
        );
    }
    return this.userName$;
  }

  getUser(): Observable<any> {
    if (!this.user$) {
      this.user$ = this.http.get<any>("/User/GetUser")
        .pipe(
          shareReplay(1),
          catchError(this.handleError<any>('getUser', []))
        );
    }
    return this.user$;
  }

  // ... 原有错误处理代码
}

修改CompanyService

@Injectable({ providedIn: 'root' })
export class CompanyService {
  private companyCache = new Map<string, Observable<any>>(); // 按ID缓存公司数据

  getCompany(id): Observable<any> {
    const idStr = id.toString();
    if (!this.companyCache.has(idStr)) {
      const company$ = this.http.get<any>("/Company/GetCompany/" + id)
        .pipe(
          shareReplay(1),
          catchError(this.handleError<any>('Error while loading company', []))
        );
      this.companyCache.set(idStr, company$);
    }
    return this.companyCache.get(idStr)!;
  }

  // ... 原有错误处理代码
}

3. 修正Header组件中的方法调用笔误 #

Header中调用的getCompaniesData与UserService中的方法名不匹配，修正后走缓存逻辑：

getCompaniesData() {
  this.userService.getCompanies().pipe(
    takeUntil(this.destroy$)
  ).subscribe(companies => {
    this.companies = companies.Data;
  })
}

4. 复用Resolver数据，减少重复请求 #

触发问题的组件已通过Resolver获取用户数据，Header可直接从路由数据中读取，避免重复发起请求：

// 在Header组件的路由事件订阅中添加
this.userName = this.route.snapshot.firstChild?.data?.user?.Data?.Name;

// 修改getUser方法，仅在路由无数据时发起请求
getUser() {
  if (!this.userName) {
    this.userService.getPersonName().pipe(
      takeUntil(this.destroy$)
    ).subscribe(user => {
      this.userName = user.Data;
    });
  }
}

5. 管理所有HTTP请求订阅的生命周期 #

为Header中所有HTTP请求订阅添加销毁信号，避免内存泄漏：

getCompany(currentCompanyId) {
  this.companyService.getCompany(currentCompanyId).pipe(
    takeUntil(this.destroy$)
  ).subscribe(company => {
    this.company = company?.Data;
    this.companyName = this.company?.Name;
    this.companyId = this.company?.Id;
  })
}

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