Angular 11 遍历好友对象校验好友关系偶发失效 刷新后恢复

异常现象 #

• 业务规则：用户双向好友关系，发起申请后待对方接受即建立好友关系
• 开发/线上复现情况：
  • 访问已添加好友的用户主页时，偶发仍渲染「添加为好友」按钮
  • 手动刷新页面后，状态判断自动恢复正常
  • 控制台打印遍历的好友记录时，偶发直接输出整个好友数组，而非预期的单条遍历对象
• 现有实现：在ngOnInit生命周期中，拉取当前登录用户全量好友列表，遍历列表校验和被访问用户的关系；this.data.user存储被访问主页的用户ID。

根因定位 #

逐行排查代码后定位到几个确定性问题，无模棱两可的猜测：

1. 异步竞态导致重复触发校验
   原代码else分支中连续发起了两个独立的用户信息请求：

   // 原代码问题片段
   this.modelDataService.getUserModel(this.outsideUserId).subscribe(回调)
   this.modelDataService.getOutsideModel(this.outsideUserId).subscribe(回调)
   

   两个HTTP请求的返回顺序、返回时机完全不受控，每次回调触发时都会重复调用checkFriends()拉取全量好友列表，导致全局的isFriend、isRequest状态被多个回调来回覆盖。
2. 遍历逻辑的状态更新顺序错误
   原forEach循环把状态判断的else分支写在了单条记录的判断逻辑里：只要遍历到任意一条和当前访问用户不匹配的记录，就会直接把isFriend、isRequest置为false。
   实际场景中全量好友列表有N条记录，前N-1条都和当前访问用户ID不匹配的情况下，第一次遍历到不匹配记录时就会把状态打为false，哪怕后续遍历到了真正的好友匹配记录，只要此时有另一个并发请求的回调刚好执行到不匹配的记录分支，状态就会被覆盖为错误值。
3. 状态值未做前置重置
   每次调用checkFriends时，没有先清空上一次遍历残留的isFriend、isRequest值，旧的状态会直接污染本次判断结果。
4. 判断条件冗余无意义
   原代码的好友匹配判断写了两个完全一致的条件：oneRequest.friendId === id || oneRequest.friendId === id，属于无效重复逻辑，没有实际校验作用。
5. 控制台输出异常的本质
   看到整个数组而非单条记录，是因为竞态导致的上下文错乱：多个订阅回调穿插执行时，上一个回调还没完成遍历就被下一个回调打断，console.log的输出实际是残留的上下文内容，不是forEach本身的逻辑错误。

具体修复方案 #

1. 消除重复请求竞态
   去掉else分支里重复的用户信息订阅，合并两个接口的调用逻辑：等被访问用户的ID确定后，仅触发一次checkFriends校验。可以结合takeUntil操作符，在组件销毁时取消未完成的订阅，避免无效回调更新状态。
2. 重构校验逻辑，避免状态被错误覆盖
   替换原有的全量遍历改全局状态的逻辑，修改后的代码如下：

   checkFriends(id: string) {
     // 每次校验前先重置状态，避免旧值污染
     this.isFriend = false;
     this.isRequest = false;
     this.friendService.getAllFriendRequests().subscribe((finalRequesters) => {
       this.checkFriend = finalRequesters;
       // 先定位和当前访问用户ID匹配的单条好友记录，不遍历每条就改全局状态
       const matchedRecord = this.checkFriend.find(record => record.friendId === id);
       // 未匹配到对应记录时，直接返回，保持默认的非好友状态
       if (!matchedRecord) return;
       // 匹配到记录后再根据状态字段赋值
       if (matchedRecord.status === "You are friend") {
         this.isFriend = true;
         matchedRecord.isFriend = true;
       } else if (matchedRecord.status === "Request Pending") {
         this.isRequest = true;
         matchedRecord.uniqueId = matchedRecord.userId;
       }
     });
   }
   

3. 补全缓存一致性兜底
   在好友关系变更（接受/拒绝申请、删除好友）的逻辑完成后，主动触发一次好友状态校验，避免本地缓存的全量好友列表和后端实际数据不一致。

为什么刷新页面后异常会消失？ #

刷新页面后所有的HTTP订阅都会重新初始化，不存在两个并发请求抢着更新全局状态的情况，遍历逻辑走到正确的好友匹配记录时，没有被其他回调的else分支打断覆盖，所以状态判断就能恢复正常。

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