函数未以正确的顺序触发异步/等待

时间:2019-05-27 00:08:26

标签: javascript angular async-await

在Angular服务中,我创建了以下函数:

getListKey(user) {
  firebase.database().ref(`userprofile/${user.uid}/list`).once('value').then(snapshot => {
    console.log(snapshot.val())
    this.listKey = snapshot.val()
    return this.listKey
  })
}

我想在加载时在另一个文件中调用此函数,然后将带回的值分配给服务中的全局listKey变量,以用于组件中的另一个函数。但是,即使使用async / await,第二个函数也会在检索数据之前触发。

这是我组件中的相关内容:

this.afAuth.authState.subscribe(async (user: firebase.User) => {
  await this.fire.getListKey(user);
  this.fire.getUserList(this.fire.listKey).subscribe(lists => {...})
  ...
}

如何让getUserList()等待listKey

1 个答案:

答案 0 :(得分:0)

在getListKey中添加一个return语句以返回承诺。否则,您将返回未定义,并且等待未定义将不会等待数据库快照准备就绪。

getListKey(user) {
  return firebase.database().ref(`userprofile/${user.uid}/list`).once('value').then(snapshot => {
    console.log(snapshot.val())
    this.listKey = snapshot.val()
    return this.listKey
  })
}

另外,您可能想在等待时离开左侧:

this.afAuth.authState.subscribe(async (user: firebase.User) => {
  const listKey = await this.fire.getListKey(user);
  this.fire.getUserList(listKey).subscribe(lists => {...})
  ...
}