在构造函数或 ngOnInit 中加载异步函数

Posted 2023-03-07

【中文标题】在构造函数或 ngOnInit 中加载异步函数

【英文标题】：Loading an async function in constructor or ngOnInit

【发布时间】：2019-06-13 18:56:29

【问题描述】：

我想在构造函数或 ngOnInit() 中调用异步函数 readUsers()。尽管我从这里使用了推荐的 workaraound，但它仍然被延迟并且不会等待执行。

async constructor functions in TypeScript?

如何延迟/等待 readUsers() 函数的执行？

users: any[];

ngOnInit() 
    this.readUsers();
    //this.readUsers(); above is called delayed so this.users below is 
    //undefined
    console.log(this.users);



public readUsers = async () =>  
    this.users = await this.userService.getUsers()
    .then(resolve=>
        console.log("within async function");
        return resolve;
    )
    .catch(reject=>
        return [];
    )



////////userService.getUsers() reads JSON Object from an endpoint (works!)
getUsers(): Promise<any> 
    return new Promise((resolve, reject) => 
        this.http
            .get('https://url.com/users/')
            .subscribe(users => 
                if (!users) 
                    reject([]);
                
                resolve(users);
            );
    );

console.log 切换，因为没有等待：

未定义

在异步函数中

【问题讨论】：

这是脱离上下文的东西，但我认为没有必要在您的服务中明确返回 Promise（getUsers() 函数）。 http 会自动为您执行此操作。如果您有任何其他使用它的原因，请纠正我。

我相信你可以调用.toPromise() 将一个 Observable 转换为一个 Promise。

【参考方案1】：

interface OnInit 
  ngOnInit(): void

当某些东西返回 void 时，通常可以将其转换为 Promise 而不会产生任何副作用

async ngOnInit(): Promise<void> 
    await this.readUsers();
    console.log(this.users);

【讨论】：

上述代码虽然有效，但不推荐。

@ABOS - 你能找到那个来源或解释原因吗？

我认为@ABOS 暗示了这样一个事实，即从ngOnInit 返回一个承诺可能会延迟您的组件的呈现（直到承诺解决），这可能是不希望的。

除非调用ngOnInit的代码等待返回的promise，否则不会延迟组件的渲染。它将继续渲染，但如上例所示，可能尚未完成对readUsers 的调用。