在構造函數或ngOnInit中加載異步函數

Question

我想在構造函數或ngOnInit（）中調用異步函數readUsers（）。 雖然我從這里使用了推薦的工作手冊，但它仍然被延遲，並且不會等待執行。

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被切換，因為沒有等待：

未定義

在異步功能中

Answer 1

interface OnInit {
  ngOnInit(): void
}

當某些東西返回空白時，你通常可以將它轉換為Promise而沒有任何副作用

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