JS - 异步等待 - 第二个 function 不等待第一个 function 完成，然后第一个 function 再次执行

Question

I'm trying to use async await in Angular 10 to first load a list of users from my backend database (Spring Boot with MariaDB) with an http request and then, after the list is loaded, to filter that list for one specific user. But somehow the loadUsers() keeps getting executed twice, as you can see in the resulting log at the end of my post.

Here's how I'd expect my code to work:

1. load all users -> console.log the list of all my users (a)

2. filter the users list and then console.log this one filtered user -> (b)

But instead of a) -> b), I get a) -> b) -> a). Where first a) is empty, because the http request wasn't finished yet, then b) which is therefore also empty, since the users are not loaded yet, and then again a), after the users were loaded?

ngOnInit() {
  this.loadOwner();
}

loadOwner = async () => {
  const result = await this.loadUsers()  // I'm not doing anything with the result, maybe that's the reason?
  // do something else here after users loading completes
  this.user= this.users.filter(user => user.id === this.product.userId)[0]  
  console.log("The user: " + this.user)  // b) (should get logged as last)
}

loadUsers() {
this._update.currentUsers$.subscribe(users => {
    this.users = users;
    console.log("my users: " + this.users)  // a) (should get logged first)
})
}

This is the final log that I'm getting with a) -> b) -> a) structure:

The filtering and the http request are working, I had the expected end result already but wanted to have cleaner code with async await, instead of nesting the loadUser function into the subscribe scope of the loadUsers. There are other things that I have to do after this and it gets more and more nested.

Answer 1

You need to make your loadUsers() a Promise.

In Typescript:

loadUsers(): Promise<any> {
  // some code
  return Promise.resolve(true);
}

Actually, in your case you will have another problem since you should actually await on the subscribe in your loadUsers(). You can therefore do it like so:

async loadUsers(): Promise<any> {
  return this._update.currentUsers$.toPromise();
}

And await the loadUsers() when calling it.