Angular异步拉取评论对应用户名顺序与userId数组不匹配如何解决？

问题原因 #

你当前的写法是循环发起多个独立的异步用户查询请求，HTTP请求的响应时间不固定，哪个请求先返回就会先把用户名推入userNames数组，所以最终顺序和userIds的顺序不一致，无法和评论一一对应。

解决方案 #

推荐用Angular自带的RxJS库的forkJoin操作符批量处理异步请求，同时构建用户ID到用户名的映射表，从根源上避免顺序错乱问题，还能自动去重相同用户的请求，减少接口调用次数。

步骤1：导入依赖

在组件顶部导入forkJoin：

import { forkJoin } from 'rxjs';

步骤2：重构请求逻辑

你可以直接删掉原来的createCommentsWithUsernames、getUsernamesByUserId方法，修改fetchEntry逻辑如下：

fetchEntry() {
  this.commentsService.getAllCommentsByMovieId(this.movieId).subscribe( (res: CommentsResultsInterface[]) => {
    this.comments = res;
    // 提取所有评论关联的用户ID并去重，避免同一个用户发多条评论时重复请求
    const uniqueUserIds = [...new Set(this.comments.map(comment => comment.userId))];
    // 批量生成所有用户的查询请求
    const userRequests = uniqueUserIds.map(uid => this.usersService.getUserById(uid));
    
    // forkJoin会等待所有请求完成后，按请求传入的顺序返回结果
    forkJoin(userRequests).subscribe((users: UserInterface[]) => {
      // 构建用户ID到用户名的映射表
      const userIdToNameMap = new Map<number, string>();
      users.forEach(user => {
        userIdToNameMap.set(user.id, user.username);
      });

      // 方案1：直接给每个评论对象追加用户名字段，模板直接遍历即可（推荐）
      this.comments = this.comments.map(comment => ({
        ...comment,
        username: userIdToNameMap.get(comment.userId) || '匿名用户' // 加兜底避免用户数据不存在时报错
      }));

      // 方案2：如果不想修改评论对象的结构，也可以单独生成和评论顺序完全对应的用户名数组
      // this.userNames = this.comments.map(comment => userIdToNameMap.get(comment.userId) || '匿名用户');
    })
  })
}

步骤3：模板渲染

如果用方案1的话，直接遍历comments数组即可，不需要处理两个数组的对应关系：

<div *ngFor="let comment of comments" class="comment-item">
  <div class="username">发布用户：{{comment.username}}</div>
  <div class="comment-body">{{comment.body}}</div>
</div>

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