Angular中如何确保订阅代码按顺序执行？解决循环异步问题

你遇到的核心问题是循环中直接订阅异步Observable会导致所有请求并行触发，回调函数的执行顺序不依赖循环的遍历顺序。哪怕i=0的分支先发起请求，它的回调（添加用户到数组）可能还没执行完，i>=1的请求回调就已经开始执行了，这时候数组里还没有目标用户，自然会出现找不到用户的问题。

要解决这个问题，需要让异步请求按顺序执行，确保前一个请求的回调完成后，再发起下一个请求。下面提供两种常用的实现方式：

方式一：使用RxJS的concat + from（符合Angular RxJS生态） #

把roles数组转成Observable流，用concat确保每个请求依次执行：

import { from, concat } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

// 将roles数组转为Observable，逐个发出元素
const roles$ = from(roles);

// 用concat保证addUsers请求按顺序执行
concat(
  roles$.pipe(
    mergeMap((newRole, index) => 
      this.databaseService.addUsers(newRole).pipe(
        mergeMap(response => {
          // 这里的index严格对应原数组的遍历顺序
          if (index < 1) {
            let newUser = new User(newRole.userName);
            newUser.children = [newRole];
            this.users.push(newUser);
            this.dataGrid.data = this.users;
          } else {
            this.roles.push(newRole);
            const targetUser = this.users.find(c => c.name === dialogComponent.userName);
            // 增加空值判断，避免意外报错
            if (targetUser) {
              targetUser.children.push(newRole);
              this.dataGrid.data = this.users;
            }
          }
          return response;
        })
      )
    )
  )
).subscribe(
  () => console.log('所有请求执行完成'),
  error => console.log(error)
);

方式二：转成Promise配合async/await（直观的异步顺序控制） #

把Observable转成Promise，用for...of循环配合await，确保每次请求完成后再处理下一个：

async processRoles() {
  try {
    // 用entries获取索引和元素，保证顺序
    for (const [index, newRole] of roles.entries()) {
      const response = await this.databaseService.addUsers(newRole).toPromise();
      
      if (index < 1) {
        let newUser = new User(newRole.userName);
        newUser.children = [newRole];
        this.users.push(newUser);
        this.dataGrid.data = this.users;
      } else {
        this.roles.push(newRole);
        const targetUser = this.users.find(c => c.name === dialogComponent.userName);
        if (targetUser) {
          targetUser.children.push(newRole);
          this.dataGrid.data = this.users;
        }
      }
    }
    console.log('所有请求执行完成');
  } catch (error) {
    console.log(error);
  }
}

// 调用处理方法
this.processRoles();

• 两种方式都保证了异步请求的顺序执行，前一个请求的回调逻辑（添加用户到数组）完成后，才会处理下一个请求。
• 额外增加了targetUser的空值判断，避免因为意外情况导致find返回undefined时出现报错。

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