Question

加载VueJS组件时，我正在使用以下方法：

getServices () {
  fb.servicesCollection.get().then(querySnapshot => {
    this.serviceList = []
    querySnapshot.forEach(doc => {
      const { name, icon } = doc.data()
      fb.storage.ref().child(icon).getDownloadURL().then(function (url) {
        console.log(url)
      })
      this.serviceList.push({id: doc.id, name: name, icon: 'iconURL'})
    })
    this.isLoading = false
  }).catch(error => {
    console.log(error)
  })
}

我想要实现的是获取URL来替换当前的'iconURL'字符串。在最近几个小时内没有找到任何方法可以做到这一点。请帮忙！

Answer 1

以下应该可以解决问题。（不过请注意，我无法对其进行测试，因此可能需要进行一些微调...您可以在评论中报告其工作方式，并在必要时进行更正）

由于您要并行执行对Firebase Storage的多个getDownloadURL()异步调用，因此您必须使用Promise.all()，因为getDownloadURL()返回了Promise，请参见doc。

getServices () {
  let namesArray = []
  let docIdArray = []
  fb.servicesCollection.get().then(querySnapshot => {
    this.serviceList = []
    let promises = []
    querySnapshot.forEach(doc => {
      const icon = doc.data().icon;
      promises.push(fb.storage.ref().child(icon).getDownloadURL())
      namesArray.push(doc.data().name)
      docIdArray.push(doc.id)
    })
    return Promise.all(promises)
  })
  .then(results => {
      results.forEach((value, index) => {
        this.serviceList.push({id: docIdArray[index], name: namesArray[index], icon: value})
      })
    })
  }).catch(error => {
    console.log(error)
  })
}

Answer 2

这就是我最终得到它的方式...

getServices () {
  fb.servicesCollection.get().then(querySnapshot => {
    this.serviceList = []
    querySnapshot.forEach(doc => {
      const { name, icon } = doc.data()
      fb.storage.ref(icon).getDownloadURL().then(url => {
        this.serviceList.push({id: doc.id, name: name, icon: url})
      })
    })
    this.isLoading = false
  }).catch(error => {
    console.log(error)
  })
}

感谢您为我提供的所有帮助！！！非常感谢！

将Firebase图片URL添加到我的收藏中

2 个答案: