在 ngOnInit Angular 之前处理异步承诺

Posted 2023-03-13

【中文标题】在 ngOnInit Angular 之前处理异步承诺

【英文标题】：Handle async promise before ngOnInit Angular

【发布时间】：2019-07-22 09:01:09

【问题描述】：

我有一个返回表数据的请求，需要像承诺等到加载数据一样进行处理。为了将数据加载到表中，我必须使用异步/等待，但这会弄乱所有其他函数/方法。

如何在不使用 ngOnInit() 的异步/等待的情况下将数据存储在 currentList 中？还是有别的办法？

async getEducationList(): Promise<any> 
  return this.educationList = await this.applicationClient.getEducations()
  .toPromise()
  .then((res) => 
    this.educationListAll = res;
  );


async ngOnInit() 
  await this.getEducationList();
  this.currentList = this.educationListAll;

注意 - this.applicationClient.getEducations() 是一个 Observable

【问题讨论】：

你不能订阅和分配数据吗

你可以在angular中使用rxjs和httpclientmodule

“搞砸了所有其他功能/方法”如何？

this.currentList 和 this.educationListAll 基本上持有相同的数据，因为 res 分配给 this.educationListAll 然后分配给 this.currectList。为什么？

问题..为什么“必须等待”？

【参考方案1】：

试试这个方法

async ngOnInit() : Promise<void> 
  this.currentList = await this.applicationClient.getEducations().toPromise();
  this.initTable(data);


initTable(data) 
  // Some code to handle the data

【讨论】：

请注意，异步函数应该返回一个 Promise。对于ngOnInit等，我通常将函数指定为：async ngOnInit(): Promise<void> ...

@Brandon typescript 将推断 ngOnInit 的类型 ??‍♂️

我不认为写返回类型是一个坏习惯，即使 typescript 可以推断出来。我通常不希望从 ngOnInit 返回 Promise，所以这只是吸引其他同事注意的一种方式。

【参考方案2】：

通过将 API 调用包装在 observable 中，然后将代码从 ngOnInit 移动到另一个函数 initTable 来解决问题。

getEducationList(): Observable<Education[]> 
  return this.applicationClient.getEducations();


initTable(data) 
  // Some code to handle the data


ngOnInit() 
  this.getEducationList().toPromise().then(data => 
    this.loader = false;
    this.initTable(data);
  );

【讨论】：

我已经基于此更新了我的答案，您仍然可以使用async / await，在我的答案中，当您获得数据时，第二行`this.initTable(data);` 将运行，给它一个试试?