Angular服务使用HttpClient获取JSON数据无法正常取值问题

所有被async标记的函数，返回值永远是Promise对象。你在组件ngOnInit中直接调用getControlsData()时没有等待Promise解析完成，赋值得到的自然是未完成状态的ZoneAwarePromise实例。
另外你在服务构造函数中直接将async函数返回值赋值给this.controls的写法也存在同样问题：构造函数是同步执行的，异步HTTP请求还未返回时，this.controls存储的始终是Promise对象，拿不到实际JSON数据。

可根据编码习惯二选一：

方案1：保留Promise写法，正确使用async/await等待结果 #

修正服务层代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // 初始化空数组存储实际返回数据，不要直接存Promise
  controls: any[] = []

  constructor(private http: HttpClient) {
    // 构造函数内触发数据加载即可，不要直接赋值给controls
    this.loadControlsData()
  }

  // 内部加载方法，请求完成后给controls赋值
  private async loadControlsData(): Promise<void> {
    try {
      this.controls = await firstValueFrom(
        this.http.get<any[]>("../assets/json/controlsData.json")
      )
    } catch (err) {
      console.error('控件数据加载失败:', err)
    }
  }

  // 对外暴露获取方法，有缓存直接返回，无缓存等待请求完成
  public async getControlsData(): Promise<any[]> {
    if (this.controls.length) return this.controls
    this.controls = await firstValueFrom(
      this.http.get<any[]>("../assets/json/controlsData.json")
    )
    return this.controls
  }

  public addControl() {
    return this.http.get("../assets/json/controlsData.json");
  }
}

修正组件层调用 #

ngOnInit需要标记为async，调用方法时加await等待Promise解析完成再赋值：

async ngOnInit() {
  this.data = await this.DataService.getControlsData()
}

Angular原生支持async标记的生命周期钩子，会正确处理钩子内的异步逻辑。

方案2：使用Angular官方推荐的Observable写法（更符合框架设计惯例） #

HttpClient原生返回Observable对象，无需强行转Promise，配合异步管道或订阅拿数据更稳妥，还能方便地加缓存、错误处理、操作符加工数据。

修正服务层代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, shareReplay } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // 加shareReplay(1)缓存请求结果，避免多次调用重复发起HTTP请求
  private controls$: Observable<any[]> = this.http.get<any[]>("../assets/json/controlsData.json")
    .pipe(shareReplay(1))

  constructor(private http: HttpClient) {}

  public getControlsData(): Observable<any[]> {
    return this.controls$
  }
}

组件层调用二选一 #

1. 模板用async管道（推荐）：自动管理订阅取消，无内存泄漏风险
   组件类中定义数据流：

   data$ = this.DataService.getControlsData()
   

   模板中使用：

   <ng-container *ngIf="data$ | async as data">
     <!-- 此处的data就是解析完成的实际JSON数据，可直接绑定使用 -->
   </ng-container>
   

2. 手动订阅拿值

   ngOnInit() {
     this.DataService.getControlsData().subscribe({
       next: (res) => {
         this.data = res
       },
       error: (err) => {
         console.error('数据加载失败', err)
       }
     })
   }
   

• 你当前服务文件中混入了Component、FormGroup、STEPPER_GLOBAL_OPTIONS等和服务逻辑无关的import，记得清理，避免不必要的打包体积冗余。
• 所有异步逻辑都必须加错误捕获，避免请求失败时页面白屏。

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