Angular循环组件内调用API出现重复请求，求解决方法

你遇到的重复请求问题，根源在于多个notes-card组件会同时触发ngOnInit，而异步请求返回前，每个组件都会认为目标personId不在localPersons里，于是各自发起相同的API请求。下面是几种可靠的解决方法：

1. 将缓存与请求逻辑移到服务层（推荐） #

Angular服务是单例的，非常适合统一处理数据缓存和请求复用。修改你的companyService，添加缓存和待处理请求的管理：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { map, tap, catchError } from 'rxjs/operators';

// 假设你有对应的类型定义
interface Person {
  id: number;
  // 其他字段
}

interface PersonResponse {
  body: {
    results: Person;
  };
}

@Injectable({ providedIn: 'root' })
export class CompanyService {
  // 缓存已获取的人员数据
  private personCache = new Map<number, Person>();
  // 跟踪正在进行的请求，避免重复发起
  private pendingRequests = new Map<number, Observable<Person>>();

  constructor(private http: HttpClient) {}

  getPerson(personId: number): Observable<Person> {
    // 优先从缓存取数据
    if (this.personCache.has(personId)) {
      return of(this.personCache.get(personId)!);
    }

    // 若已有同ID的请求在进行，直接复用该请求的Observable
    if (this.pendingRequests.has(personId)) {
      return this.pendingRequests.get(personId)!;
    }

    // 发起新请求并缓存相关状态
    const request$ = this.http.get<PersonResponse>(`/api/persons/${personId}`).pipe(
      map(res => res.body.results),
      tap(person => {
        this.personCache.set(personId, person);
        this.pendingRequests.delete(personId); // 请求完成后移除待处理标记
      }),
      catchError(error => {
        this.pendingRequests.delete(personId); // 请求失败也要清理标记
        return throwError(() => error);
      })
    );

    this.pendingRequests.set(personId, request$);
    return request$;
  }
}

之后修改notes-card的逻辑，不用再自己检查localPersons，直接调用服务即可：

ngOnInit(): void {
  this.subscription.add(
    this.companyService.getPerson(this.note.personId).subscribe(person => {
      this.person = person;
      // 若仍需维护localPersons，这里做一次检查即可
      if (!this.localPersons.find(p => p.id === person.id)) {
        this.localPersons.push(person);
      }
    })
  );
}

2. 父组件预先处理人员数据 #

在渲染子组件前，父组件先收集所有唯一的personId，统一请求后再把人员数据传递给子组件，从根源避免子组件各自发起请求：

父组件代码：

import { Component, OnInit } from '@angular/core';
import { CompanyService } from './company.service';

interface Note {
  id: number;
  personId: number;
  name: string;
}

interface Person {
  id: number;
  // 其他字段
}

@Component({
  selector: 'app-notes-container',
  templateUrl: './notes-container.component.html'
})
export class NotesContainerComponent implements OnInit {
  notes: Note[] = []; // 假设已从接口获取
  personMap = new Map<number, Person>();

  constructor(private companyService: CompanyService) {}

  ngOnInit(): void {
    // 提取所有唯一的personId
    const uniquePersonIds = [...new Set(this.notes.map(note => note.personId))];
    
    uniquePersonIds.forEach(id => {
      this.companyService.getPerson(id).subscribe(person => {
        this.personMap.set(id, person);
      });
    });
  }
}

父组件模板：

<ng-container *ngFor="let note of notes">
  <div class="cards-grid">
    <notes-card
      [note]="note"
      [person]="personMap.get(note.personId)"
    ></notes-card>
  </div>
</ng-container>

子组件直接接收person输入，无需再发起API请求。

3. 子组件内添加请求状态标记（临时方案） #

如果暂时不想改动服务或父组件，可以在子组件内维护一个正在请求的ID集合，避免重复发起请求：

import { Component, Input, OnInit } from '@angular/core';
import { CompanyService } from './company.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'notes-card',
  templateUrl: './notes-card.component.html'
})
export class NotesCardComponent implements OnInit {
  @Input() note!: { id: number; personId: number; name: string };
  person: any;
  localPersons: any[] = []; // 假设已存在
  subscription = new Subscription();
  // 跟踪当前组件正在请求的personId
  private requestingIds = new Set<number>();

  constructor(private companyService: CompanyService) {}

  ngOnInit(): void {
    const personId = this.note.personId;
    // 检查：数据未缓存 且 当前没有同ID的请求在进行
    if (!this.localPersons.find(p => p.id === personId) && !this.requestingIds.has(personId)) {
      this.requestingIds.add(personId);
      this.subscription.add(
        this.companyService.getPerson(personId).subscribe({
          next: data => {
            const person = data.body.results;
            if (!this.localPersons.find(p => p.id === person.id)) {
              this.localPersons.push(person);
            }
            this.requestingIds.delete(personId);
          },
          error: () => {
            this.requestingIds.delete(personId); // 请求失败也要清理标记
          }
        })
      );
    }
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

注意：这种方案因为每个子组件都有独立的requestingIds集合，极端情况下仍可能出现重复请求（比如多个组件同时检查时，都还没把ID加入集合），因此仅作为临时过渡方案。

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