异步代码执行致temp变量赋值undefined，求同步改造方案

你的问题核心是HTTP请求的异步执行顺序问题：代码还没等两个请求返回结果，就已经执行了temp的赋值和数组push操作，此时this.user和this.review还未被赋值，所以temp里的对应字段为undefined。

下面提供两种可靠的改造方案：

方案一：RxJS原生风格（用forkJoin并行处理请求） #

利用RxJS的forkJoin操作符，等待两个请求都完成后再处理结果，这是Angular中处理多异步请求的标准方式：

// 先导入forkJoin
import { forkJoin } from 'rxjs';

// 改造循环逻辑
this.movieData.reviews.forEach(reviewItem => {
  // 定义两个请求
  const userReq = this.http.get(`http://localhost:9000/getUserByUserId/${reviewItem.userId}`);
  const reviewReq = this.http.get(`http://localhost:9000/getReviewById/${reviewItem.reviewId}`);

  // forkJoin等待两个请求都完成后返回结果数组
  forkJoin([userReq, reviewReq]).subscribe(([userData, reviewData]) => {
    // 直接用请求返回的局部变量创建temp，避免全局变量污染
    const temp = {
      userdata: userData,
      reviewdata: reviewData
    };
    console.log(temp);
    this.moviereviews.push(temp);
  });
});

方案二：Async/Await风格（更接近同步写法） #

如果更习惯同步代码的写法，可以用firstValueFrom把RxJS Observable转为Promise，结合async/await和Promise.all实现并行请求：

// 导入需要的工具
import { firstValueFrom } from 'rxjs';

// 外层函数必须标记为async
async loadMovieReviews() {
  for (const reviewItem of this.movieData.reviews) {
    try {
      // 并行发起两个请求
      const userPromise = firstValueFrom(
        this.http.get(`http://localhost:9000/getUserByUserId/${reviewItem.userId}`)
      );
      const reviewPromise = firstValueFrom(
        this.http.get(`http://localhost:9000/getReviewById/${reviewItem.reviewId}`)
      );

      // 等待两个请求都完成，拿到结果
      const [userData, reviewData] = await Promise.all([userPromise, reviewPromise]);

      const temp = {
        userdata: userData,
        reviewdata: reviewData
      };
      console.log(temp);
      this.moviereviews.push(temp);
    } catch (err) {
      // 捕获请求错误
      console.error('加载数据失败:', err);
    }
  }
}

// 调用这个方法
this.loadMovieReviews();

关键注意点 #

• 不要用全局的this.user和this.review存储请求结果：循环中异步操作会导致全局变量被覆盖，直接用请求返回的局部变量更安全。
• 并行请求比顺序请求效率更高：两个请求不需要等待彼此完成，forkJoin和Promise.all都能实现并行处理，节省等待时间。

内容的提问来源于stack exchange，提问作者Gubbala Sai Nikhil