除非在 vuejs2 中通过热重载更改代码，否则 firebase 存储不会运行

Question

我正在创建一个图像加载应用程序。图像详细信息存储在 Firestore 中并成功检索。然后使用图像名称创建 Firebase 存储的路径。但是函数Firebase.storage.ref(...path).getDownloadURL() 根本不运行，包括回调.then(...) 或.catch(...)。除非在“npm run serve”运行时在 created 方法中更改了代码。 提前致谢。

在 npm 6.4.1 上使用 Firebase 版本 5.11.0，在运行 Ubuntu 19 的机器上使用节点 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')
  }
}

数组 imageURLs 应填充来自 Firebase 存储的下载 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 中的一个错字。