Angular中避免重复API调用的优化方案咨询

场景1：无参API（如GetAllFlowers()）仅调用一次 #

通过Angular单例Service结合RxJS的缓存操作符，就能实现无参API只发起一次请求，后续所有调用直接复用缓存结果。

实现代码（FlowerService） #

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

@Injectable({ providedIn: 'root' })
export class FlowerService {
  // 缓存无参API的请求Observable
  private getAllFlowers$: Observable<any[]> | null = null;

  constructor(private http: HttpClient) {}

  getAllFlowers(): Observable<any[]> {
    // 仅当缓存不存在时发起请求
    if (!this.getAllFlowers$) {
      this.getAllFlowers$ = this.http.get<any[]>('/api/flowers')
        .pipe(
          // 缓存最后1次请求结果，后续订阅直接复用
          shareReplay(1)
        );
    }
    return this.getAllFlowers$;
  }
}

组件调用示例 #

不管多少组件调用getAllFlowers()，只会触发一次API请求：

// 任意组件内
constructor(private flowerService: FlowerService) {}

ngOnInit() {
  this.flowerService.getAllFlowers().subscribe(flowers => {
    // 处理返回的花列表数据
  });
}

场景2：带参API（如GetFlowerType(1)）避免同参数重复调用 #

用Map对象缓存不同参数对应的请求Observable，同一参数的并发请求会复用同一个请求实例，不会重复发起API调用。

升级后的FlowerService代码 #

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

@Injectable({ providedIn: 'root' })
export class FlowerService {
  private getAllFlowers$: Observable<any[]> | null = null;
  // 用Map存储不同参数的请求缓存，键为参数值，值为对应的Observable
  private flowerTypeCache = new Map<number, Observable<any[]>>();

  constructor(private http: HttpClient) {}

  getAllFlowers(): Observable<any[]> {
    if (!this.getAllFlowers$) {
      this.getAllFlowers$ = this.http.get<any[]>('/api/flowers')
        .pipe(shareReplay(1));
    }
    return this.getAllFlowers$;
  }

  getFlowerType(typeId: number): Observable<any[]> {
    // 检查缓存中是否已有该参数的请求
    if (!this.flowerTypeCache.has(typeId)) {
      const request$ = this.http.get<any[]>(`/api/flowers/type/${typeId}`)
        .pipe(shareReplay(1));
      this.flowerTypeCache.set(typeId, request$);
    }
    // 返回缓存的请求Observable
    return this.flowerTypeCache.get(typeId)!;
  }

  // 可选：添加缓存清空方法，用于数据更新后刷新缓存
  clearFlowerTypeCache(typeId?: number) {
    if (typeId) {
      this.flowerTypeCache.delete(typeId);
    } else {
      this.flowerTypeCache.clear();
    }
  }

  clearAllFlowersCache() {
    this.getAllFlowers$ = null;
  }
}

组件调用示例 #

// 组件A调用typeId=1（首次调用，发起API请求）
constructor(private flowerService: FlowerService) {}

ngOnInit() {
  this.flowerService.getFlowerType(1).subscribe(data => {
    // 处理类型1的花数据
  });
}

// 组件B同时调用typeId=1（复用组件A的请求，不发新请求）
constructor(private flowerService: FlowerService) {}

ngOnInit() {
  this.flowerService.getFlowerType(1).subscribe(data => {
    // 直接用缓存的结果
  });
}

补充说明 #

如果后端数据更新了，你可以调用clearFlowerTypeCache(1)清空指定参数的缓存，或者clearAllFlowersCache()清空无参API的缓存，下次调用时会重新发起请求获取最新数据。

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