Angular 12中如何遍历对象数组并在每次迭代中调用API？

你遇到的核心问题是：this.http.get()返回的是Observable对象，而不是直接的请求结果。所以用map遍历数组后，得到的只是一堆未被订阅的Observable，不会自动发起请求或返回数据。下面给你两种常用的解决方案，以及为什么之前的代码行不通的原因。

为什么你的代码没得到期望结果？ #

• 第一段代码：map只是把每个userId转换成了HTTP请求的Observable，但你没有订阅这些Observable。Observable是惰性的，只有订阅后才会发起请求并输出数据，所以你打印的数组里全是未触发的Observable对象。
• 第二段代码：用of(this.userProps)把数组包装成Observable后，内部的map还是在生成Observable数组，最后得到的是一个「发出Observable数组的Observable」，同样没有处理订阅和合并请求的步骤。

方案1：并行发起所有请求（推荐） #

用forkJoin操作符可以同时发起所有HTTP请求，等所有请求都完成后，将每个请求的结果合并成一个数组返回，适合这种多个独立请求的场景。

import { forkJoin } from 'rxjs';

// 第一步：把每个user转换成对应的HTTP请求Observable
const userRequestObservables = this.userProps.map(user => 
  this.http.get(`https://jsonplaceholder.typicode.com/users/${user.userId}`)
);

// 第二步：用forkJoin合并所有Observable，等待全部请求完成
forkJoin(userRequestObservables).subscribe({
  next: (newUsersProps) => {
    console.log(newUsersProps); // 这里就是你想要的完整用户信息数组
    // 把结果赋值给组件变量，方便后续使用
    this.newUsersProps = newUsersProps;
  },
  error: (error) => {
    console.error('请求过程中出错:', error);
  }
});

方案2：顺序发起请求 #

如果需要按顺序发起请求（比如请求之间有依赖，或者不想同时发送太多请求），可以用from+concatMap+toArray的组合：

import { from } from 'rxjs';
import { concatMap, toArray } from 'rxjs/operators';

// 用from把数组转换成Observable，逐个发出每个user对象
from(this.userProps).pipe(
  // concatMap会等待前一个请求完成后，再发起下一个请求
  concatMap(user => this.http.get(`https://jsonplaceholder.typicode.com/users/${user.userId}`)),
  // toArray会把所有请求结果收集成一个数组，当所有请求完成时发出
  toArray()
).subscribe({
  next: (newUsersProps) => {
    console.log(newUsersProps);
    this.newUsersProps = newUsersProps;
  },
  error: (error) => {
    console.error('请求出错:', error);
  }
});

额外优化：用Async管道避免内存泄漏 #

如果你是在Angular组件中使用，推荐用Async管道来自动管理订阅和取消订阅，避免手动订阅导致的内存泄漏：

// 组件类中定义一个Observable类型的变量
newUsersProps$: Observable<any[]>;

ngOnInit() {
  const userRequestObservables = this.userProps.map(user => 
    this.http.get(`https://jsonplaceholder.typicode.com/users/${user.userId}`)
  );
  this.newUsersProps$ = forkJoin(userRequestObservables);
}

然后在模板中直接使用：

<div *ngFor="let user of newUsersProps$ | async">
  <h3>{{user.name}}</h3>
  <p>邮箱：{{user.email}}</p>
</div>

Async管道会自动订阅newUsersProps$，当组件销毁时也会自动取消订阅，非常省心。

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