angular - 如何使 Angular Async Await 工作或等到 http 调用完成？

Question

我在等待得到回复时遇到了一些问题。这是代码
Component.ts 点击搜索按钮 doSearch() 将被调用，然后触发 http 调用以从 JSON 获取数据。

doSearch() {
    console.log('reached 1');
    this.getDataFromJson();
    console.log('reached 5');
} 

getDataFromJson(): void {
    this.dataService.getdata().then((data: any) => {
      console.log('reached 3');
      data.forEach(item => {
        //console.log(item[1]);
      });
      console.log('reached 4');
    });
 }

数据服务.ts：

这里进行实际的 http 调用以获取 json。Te json 在 assets/json 文件夹中。

datatURL = 'assets/json/data.json';    
async getdata() : Promise<MyData[]> {
    const result= await this.httpClient.get<MyData[]>(this.dataURL).toPromise();
    console.log('reached 2');
    return result;
}

我希望控制台打印为

• 达到1
• 达到2
• 达到3
• 达到4
• 达到5

但相反，执行顺序是（http调用是异步的，不等待？？）

• 达到1
• 达到5
• 达到2
• 达到3
• 达到4

在执行下一个块之前，我需要解析数据以获取一些信息。我怎样才能做到这一点？

标签： angular