Firebase存儲不會運行，除非在vuejs2中通過熱重載更改了代碼

Question

我正在創建一個圖像加載應用程序。 圖像詳細信息存儲在Firestore中，並已成功檢索。 然后使用映像名稱創建Firebase存儲的路徑。 然而，功能Firebase.storage.ref(...path).getDownloadURL()不運行在所有的，包括回調.then(...)或.catch(...) 除非在“ npm run serve”運行時在創建的方法中更改了代碼。 提前致謝。

在運行Ubuntu 19的計算機上，在npm 6.4.1上使用Firebase版本5.11.0，在節點v10.15.3上使用。Vue-cli版本3.7.0。 也使用eslint

import firebase from 'firebase';

export default {
  name:'imageView',
  props: ["imaGes"],
  data(){
    return{
      imageURLs:[]
    }
  },
  created(){
    console.log('start')
    var storage = firebase.storage();
    this.imaGes.forEach(iMaGe => {
      //console.log(iMaGe.image_name)
    var storageRef = storage.ref('images_img/'+iMaGe.image_name);
    console.log('reference completee')
    storageRef.getDownloadURL().then(url =>{
      //console.log('bo')
      const data = url;
      this.imageURLs.push(data);
      //console.log('get completed')
      //console.log('hi')
    })
    .catch(err=>{
      console.log(err)
    })
    });
    console.log('completed')
  }
}

數組imageURL應使用Firebase Storage的下載URL進行填充。

Answer 1

您需要使用Promise.all()並行執行對異步getDownloadURL()方法的調用。

import firebase from 'firebase';

export default {
  name:'imageView',
  props: ["imaGes"],
  data(){
    return{
      imageURLs:[]
    }
  },
  created(){
    console.log('start')
    var storage = firebase.storage();

    const promises = [];

    this.imaGes.forEach(iMaGe => {
      var storageRef = storage.ref('images_img/'+iMaGe.image_name);
      console.log('reference completee')
      promises.push(storageRef.getDownloadURL());
    });

    return Promise.all(promises)   
    .then(results => {
        this.imageURLs = results;
    })
    .catch(err=>{
       console.log(err)
    });
  }
}

另請注意iMage.image_name的錯字。