JS - Asyn c Await - вторая функция не ждет завершения первой функции, затем первая функция выполняется снова - PullRequest
Новая
       12

JS - Asyn c Await - вторая функция не ждет завершения первой функции, затем первая функция выполняется снова

0 голосов
/ 09 июля 2020

Я пытаюсь использовать async await в Angular 10, чтобы сначала загрузить список пользователей из моей серверной базы данных (Spring Boot с MariaDB) с помощью http-запроса, а затем, после загрузки списка, отфильтровать этот список для одного указанного c пользователя. Но почему-то loadUsers() продолжает выполняться дважды, как вы можете видеть в итоговом журнале в конце моего сообщения.

Вот как я ожидал, что мой код будет работать:

  1. загрузить всех пользователей -> console.log список всех моих пользователей (a)

  2. отфильтруйте список пользователей, а затем console.log этого одного отфильтрованного пользователя -> ( б)

Но вместо а) -> б) я получаю а) -> б) -> а). Где сначала а) пусто, потому что HTTP-запрос еще не был завершен, затем б), который, следовательно, также пуст, поскольку пользователи еще не загружены, а затем снова а) после загрузки пользователей? 

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

Это последний журнал, который я получаю с а) -> б) -> а) структурой:

результат

Фильтрация и HTTP-запрос работают, у меня уже был ожидаемый конечный результат, но я хотел иметь более чистый код с asyn c await, вместо того, чтобы вкладывать функцию loadUser в область подписки loadUsers. Есть и другие вещи, которые мне нужно сделать после этого, и это становится все более и более вложенным.

1 Ответ

0 голосов
/ 09 июля 2020

Вам нужно сделать свой loadUsers () Promise.

В Typescript: 

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

На самом деле, в вашем случае у вас будет другая проблема, так как вам нужно ждать на subscribe в вашем loadUsers (). Поэтому вы можете сделать это так: 

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

И ожидать loadUsers () при его вызове.

...