javascript - 使用 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');

并且没有显示错误。

这就是事情变得更奇怪的地方。如果我再添加一个await在 for 循环内部从其他节点检索数据，然后从 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 专家都可以解释一下吗？

<小时/>

更新:现在可以使用了。原来是await在 for 循环中确实有效。但无论出于何种原因，从该特定节点检索数据都需要很长时间。因此，在组件继续执行其他功能之前，我没有看到任何 console.log。在组件中添加了加载指示器。现在一切都渲染得很好。

Answer 1

您错误地理解了 promise 数组的概念。首先构建 Promise 数组，然后在该数组上使用 Promise.all 。不要等待每个单独的。

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

const resolvedSoundcasts = await Promise.all(soundcastPromises)

这是为了修复您对 Promise.all 的使用。我不确定您的查询为何挂起。