使用异步/等待从firebase数据库顺序检索数据不起作用

Question

我有一个 react.js 组件，我打算在其中按顺序从 firebase 中的两个不同节点提取数据。这是代码。但它不起作用：

async componentDidMount() {
  const publisherID = this.props.match.params.id;
  const that = this;
  const soundcasts = [];

  const publisher = await firebase.database().ref('publishers/' + publisherID).once('value');

  const soundcastsArr = Object.keys(publisher.val().soundcasts);

  console.log('soundcastsArr: ', soundcastsArr);

  let soundcast;
  for(let i = 0; i < soundcastsArr.length; i++) {
    console.log('for block called');
    soundcast = await firebase.database().ref(`soundcasts/${soundcastsArr[i]}`).once('value');
    console.log('soundcast: ', soundcast.val());
    console.log('i: ', i); 
  }
}

我可以看到soundcastsArr 的console.log 和第一个console.log('for block called');，但看不到其余部分。似乎循环在soundcast = await firebase.database().ref(soundcasts/${soundcastsArr[i]}).once('value');

行停止执行

并且没有显示错误。

这里变得更奇怪了。如果我在 for 循环中添加另一个 await 以从其他节点检索数据，就在从 soundcasts 节点检索数据之前，如下所示：

for(let i = 0; i < soundcastsArr.length; i++) {
    console.log('for block called');
    const user = await firebase.database().ref(`users/reionviorfruinjkd343fsk`).once('value');
    console.log('user: ', user.val());
    soundcast = await firebase.database().ref(`soundcasts/${soundcastsArr[i]}`).once('value');
    console.log('soundcast: ', soundcast.val());
    console.log('i: ', i);
  }

它使一切正常工作，我让每个 console.log 显示。

这对我来说似乎很奇怪。

任何 Firebase 专家都可以对此有所了解吗？

---

更新：这正在工作。事实证明，for 循环中的await 确实有效。但无论出于何种原因，从该特定节点检索数据都需要很长时间。因此，在组件继续执行其他功能之前，我没有看到任何 console.log。在组件中添加了加载指示器。现在一切都很好。

Answer 1

您错误地处理了一系列承诺的概念。首先构建 promise 数组，然后在该数组上使用 Promise.all。不要await每个人。

const soundcastPromises = soundcastsArr.map((soundcast) => {
  return firebase.database().ref(`soundcasts/${soundcastsArr[i]}`).once('value')
})

const resolvedSoundcasts = await Promise.all(soundcastPromises)

这是为了解决您对Promise.all 的使用问题。我不确定您的查询为何挂起。