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

Posted 2023-02-22

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

【英文标题】：firebase storage not running unless code changed with hot reload in vuejs2

【发布时间】：2019-09-21 03:37:50

【问题描述】：

我正在创建一个图像加载应用程序。图像详细信息存储在 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。

【参考方案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 中的一个错字。

【讨论】：

感谢您的帮助，但我试过了，问题仍然存在，函数 Promise.all() 确实解决了但是在初始编译时返回一个空集。但是，当站点正在热重新加载并进行任何更改时，将返回填充的数组

控制台除了console.log()语句外没有错误或输出

你确定props被正确传递并且你有一个正确的this.imaGes值吗？如果在forEach 之前执行console.log(this.imaGes);，你会得到什么？

是的，正如我之前所说的，一切都可以完美地解析和发送，即使我只是在页面已经在开发服务器上运行时更改函数中的一个字符，也会收到 URL