Angular如何从httpClient获取对象映射并在方法中正确返回

问题核心原因 #

• 本质是JavaScript异步执行顺序问题：Angular的HttpClient返回的是Observable对象，subscribe()的回调函数需要等HTTP请求完成后才会异步执行。你调用getMapOfUsers()时，return语句会在回调执行前就运行，此时Map还没有被填充数据，所以size为0、无法正常取值。控制台能看到Entries是因为控制台打印的是引用对象，后续请求完成填充数据后控制台会自动更新显示，和代码运行时的实际状态不一致。
• UserDto的login属性标红多为TS类型校验问题：HTTP请求返回的是普通JSON对象，不会自动转为你定义的UserDto类实例，改用接口定义DTO更适配HTTP返回场景。
• 语法误用：遍历数组设置Map用map()方法不合适，map()是用来生成新数组的，纯遍历操作应该用forEach()。

修复方案 #

第一步：优化DTO定义（解决属性标红问题） #

把UserDto从类改成接口，更适配HTTP返回的普通JSON结构：

export interface UserDto {
  login: string;
  password: string;
}

AuthService代码无需修改，保持原有逻辑即可。

第二步：改造异步逻辑，两种常用实现方案可选 #

方案1：返回Observable<Map<string, string>>，调用处订阅取值

import { map } from 'rxjs';

// 改造getMapOfUsers，返回Observable，请求完成后抛出填充好的Map
private getMapOfUsers(): Observable<Map<string, string>> {
  return this.auth.getUser().pipe(
    map(res => {
      const priceListMap = new Map<string, string>();
      // 用forEach遍历数组设值
      res.forEach(item => {
        priceListMap.set(item.login, item.password);
      });
      return priceListMap;
    })
  );
}

// 调用处订阅拿结果，所有对Map的操作都要放在回调内
getLoginData() {
  this.getMapOfUsers().subscribe(userMap => {
    console.log(userMap);
    console.log(userMap.size); // 此时返回正确的条目数量
    console.log(userMap.get('你的login值')); // 可以正常通过key取值
  });
}

方案2：用async/await语法（更符合同步写法习惯）

// Angular 12及以下版本用toPromise
private async getMapOfUsers(): Promise<Map<string, string>> {
  const res = await this.auth.getUser().toPromise();
  const priceListMap = new Map<string, string>();
  res.forEach(item => {
    priceListMap.set(item.login, item.password);
  });
  return priceListMap;
}

// 调用处用await拿结果
async getLoginData() {
  const userMap = await this.getMapOfUsers();
  console.log(userMap);
  console.log(userMap.size);
  console.log(userMap.get('你的login值'));
}

如果你用Angular 12+版本，toPromise已被标记废弃，可以用firstValueFrom替换：

import { firstValueFrom } from 'rxjs';
// 替换对应代码行即可
const res = await firstValueFrom(this.auth.getUser());

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