来自服务的同步Angular 8 HTTP请求

Question

我正在尝试从Angular 8服务中食用HTTP获取请求。我需要通过RESTFUL服务加载一些数据，然后使用它们以填充D3图(D3侧不是问题(。

我正在尝试使用异步/等待功能。

在ngoninit中，我尝试使用http请求加载数据，例如：

ngOnInit() { 
  console.log("ngOnInit");
  this.loadRESTDataSync();
}
async loadRESTDataSync() {    
  console.log("PRE-REST!")
  this.m_graph = await this.loadRESTDataPromise(); 
  console.log("POST-REST!");
  //works on m_graph...
}
private loadRESTDataPromise(): Promise<any> {
    return this.service.getData().toPromise()
      .then(resp => resp as MyObjects[]);
}

然后，我尝试在ngafterviewinit内部创建D3图表，例如：

ngAfterViewInit() {
  console.log("ngAfterViewInit");
  this.createChart();
}

控制台打印的序列是：

ngOnInit
PRE_REST!
ngAfterViewInit
POST-REST!

因此，当我运行应用程序时，图表为空，因为ngafterviewinit在HTTP REST呼叫终止之前被调用(因此尚无数据显示(。

应在loadRestDataSync/loadRestDataPromise终止之后调用ngafterviewinit。

哪种正确的方法？也许我对循环挂钩有错？

i已实现了重大方法，如果我调整窗口大小，则图形是正确的，但是问题是第一个负载。

你能给我一些正确的方式吗？

非常感谢，再见。

Answer 1

loadRESTDataSync()是异步的，因此剂量不会阻止UI线程，因此ngAfterViewInit()可以自由发生。明智的做法是不要像您注意到的那样阻止数据获取的UI线程。现在，您需要的只是在this.m_graph = await this.loadRESTDataPromise();之后致电createChart()。

我遇到了同样的问题，在5月的情况下，我宁愿提出"获取完整消息"并对此事件做出反应：

dataIsLoaded = new Subject<any>();
ngOnInit() {
     this.dataIsLoaded.subscribe(d => this.createChart(d));
     this.loadRESTDataSync();
}
async loadRESTDataSync() {    
  this.m_graph = await this.loadRESTDataPromise();
  //works on m_graph...
  this.dataIsLoaded.next(d);
}
this.createChart(data) {
  //
}

您可以将数据存储在变量中，当您的数据准备就绪时，只需引发一个空的消息即可通知订阅方法。