如何在Angular 11电商应用中避免重复发起Get请求？

你的核心问题是每个商品卡片组件都独立发起促销数据请求，导致重复请求。可以从服务层缓存数据或者父组件统一请求后分发数据两个方向解决，下面是具体实现：

方法一：在服务层缓存请求结果（推荐） #

通过RxJS的shareReplay操作符，让多个组件共享同一个请求的结果，只会发起一次API调用。

修改PromoProductsService代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Campaign } from '../models/campaign';
import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PromoProductsService {

  private apiURL: string;
  // 缓存请求的Observable，确保只发起一次请求
  private promoData$: Observable<Campaign>;
 
  constructor(private http: HttpClient) {
    // 替换成你的实际API基础地址（修正原代码中apiURL未定义的问题）
    const baseURL = 'https://your-api-domain.com';
    this.apiURL = `${baseURL}/promo-products`;
  }

  public getPromoData(): Observable<Campaign> {
    // 仅当缓存不存在时，才发起新请求
    if (!this.promoData$) {
      this.promoData$ = this.http.get<Campaign>(`${this.apiURL}/campaign`).pipe(
        // 缓存最后一次请求结果，供后续订阅者复用
        shareReplay(1)
      );
    }
    return this.promoData$;
  }
}

组件代码无需大幅修改，原来的订阅逻辑保持不变即可——现在多个组件调用getPromoData()时，只会触发一次API请求，后续订阅直接读取缓存的结果。

方法二：父组件统一请求后分发数据 #

如果商品卡片是列表的子组件，可以在父组件（比如商品列表组件）中一次性获取促销数据，再将促销商品ID集合传递给每个卡片组件，彻底避免子组件重复请求。

1. 父组件（商品列表）代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { PromoProductsService } from '../services/promo-products.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit, OnDestroy {
  private destroyed$ = new Subject<void>();
  promoProductIds: number[] = [];
  products: any[] = []; // 你的商品列表数据

  constructor(private promoProductsService: PromoProductsService) {}

  ngOnInit(): void {
    // 父组件仅发起一次请求
    this.promoProductsService.getPromoData().pipe(takeUntil(this.destroyed$)).subscribe(data => {
      // 提取所有促销商品的ID，方便子组件快速判断
      this.promoProductIds = data.campaign.products.map(item => item.id);
    });
  }

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }
}

2. 父组件模板传递数据 #

<!-- 遍历商品列表，将促销ID集合传给每个卡片 -->
<app-product-card 
  *ngFor="let product of products"
  [product]="product"
  [promoProductIds]="promoProductIds"
></app-product-card>

3. 商品卡片组件代码 #

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html'
})
export class ProductCardComponent implements OnChanges {
  @Input() product: any;
  @Input() promoProductIds: number[] = [];
  isCampaignProduct = false;

  constructor(private cdr: ChangeDetectorRef) {}

  // 监听促销ID集合的变化，判断当前商品是否为促销品
  ngOnChanges(): void {
    this.isCampaignProduct = this.promoProductIds.includes(this.product.product_id);
    this.cdr.detectChanges();
  }
}

这种方式性能更优，子组件无需处理异步请求，直接通过输入属性判断即可。

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