使用async / await无法正常从firebase数据库中检索数据

时间:2018-01-08 04:20:38

标签: javascript reactjs firebase async-await

我有一个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(。似乎循环停止在行).once('value'); soundcasts / $ {soundcastsArr [i]} 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

它使一切正常,我得到每个await来显示。

这对我来说似乎很奇怪。

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

更新:现在正在运行。事实证明,for循环中的var CardSchema = new mongoose.Schema({ beName: String, beLink: String, cards: [{ cardType: String, cardBundle: String }] 确实有效。但无论出于何种原因,从该特定节点检索数据需要很长时间。因此,在组件继续执行其他功能之前,我没有看到任何console.log。将加载指示符添加到组件中现在一切都很好。

1 个答案:

答案 0 :(得分:0)

你正在接近一系列承诺的概念。首先构建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的使用。我无法确定您的查询为什么会挂起。