使用async / await无法正常从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显示。

这对我来说似乎很奇怪。

任何火力专家都能对此有所了解吗？

---

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

Answer 1

你错误地接近了一系列承诺的概念。 首先构建promises数组，然后在该数组上使用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的使用。 我无法确定您的查询为什么会挂起。