Angular：如何将用户名数组转为Observable<User[]>并提取User[]？

问题描述 #

传入非Observable类型的string[]用户名数组，调用getUser(username)（基于Angular内存Web API的HTTP GET请求）获取每个用户对象，最终返回Observable<User[]>，并能从中提取出User[]数组，要求尽量避免使用Promise。

原尝试代码：

usernamesToUserObjects(usernames: string[]): User[] {
  var members: User[] = [];

  for (let username of usernames) {
    if (username.trim() === '') {
      continue;
    } else {
      this.userService.getUser(username.trim())
       .pipe(
          map((user: User[] | undefined) => {
            if (user !== undefined) {
              console.log(`(debug) ${user.username} was found!`);
              members.push(user);
            }
          })
        );
    }
  }

  // 请求还未完成就执行到这里，导致返回空数组
  console.log(`(debug) User objects are : ${members}`);
  return members;
}

可用的UserService方法：

usersUrl = '/api/users';

constructor(private http: HttpClient) {}

// 基于Angular内存Web API获取用户列表，已做缓存和错误处理
users = this.http
  .get<IUser[]>(this.usersUrl)
  .pipe(retry(2), catchError(this.handleError('getUsers()', [])));

// 根据用户名查找用户，返回Observable<IUser | undefined>
getUser(username: string): Observable<IUser | undefined> {
  return this.users.pipe(
    take(1),
    map((users: IUser[]) => {
      return users.find((user) => user.username === username);
    })
  );
}

解决方案 #

核心思路 #

HTTP请求是异步操作，无法同步返回User[]，必须返回Observable<User[]>。利用RxJS的forkJoin操作符等待所有用户查询请求完成，再收集有效结果返回。

修改后的代码 #

import { forkJoin, Observable } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// 修改方法返回类型为Observable<User[]>
usernamesToUserObjects(usernames: string[]): Observable<User[]> {
  // 过滤空用户名并处理trim
  const validUsernames = usernames
    .map(name => name.trim())
    .filter(name => name !== '');

  // 生成每个用户名对应的查询Observable
  const userObservables = validUsernames.map(username => 
    this.userService.getUser(username)
  );

  // 使用forkJoin等待所有查询完成，过滤掉undefined的结果
  return forkJoin(userObservables).pipe(
    map(users => users.filter(user => user !== undefined) as User[])
  );
}

如何提取User[]数组 #

通过订阅返回的Observable来获取最终的User[]：

// 使用示例
this.usernamesToUserObjects(['alice', 'bob', ''])
  .subscribe(users => {
    console.log('获取到的用户数组：', users);
    // 在这里处理User[]数组
  });

代码说明 #

• 过滤有效用户名：先处理输入数组，去除空字符串和空白字符，避免无效查询。
• 生成查询Observable数组：将每个有效用户名转换为getUser返回的Observable。
• forkJoin收集结果：forkJoin会等待所有Observable完成后，将结果按顺序打包成数组返回。
• 过滤无效结果：由于getUser可能返回undefined，最后过滤掉这些无效项，确保返回的是纯User[]。

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