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

Question

我正在尝试使用来自 Angular 8 服务的 http GET 请求。我需要通过 RESTful 服务加载一些数据，然后使用它们来填充 D3 图(D3 端不是问题)。

我正在尝试使用 async/await 函数。

在 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。

正确的做法是什么？也许我对循环钩子(Hook)的理解是错误的？

我实现了 onResize 方法，如果我调整窗口大小，图形是正确的，但问题是第一次加载。

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

非常感谢，再见。

Answer 1

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

我有同样的问题，在可能的情况下，我更愿意提出“获取完整消息”并对这个事件使用react:

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) {
  //
}

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