从Firebase存储返回下载网址的功能 [英] Function that returns download URL from Firebase storage

问题描述

我正在编写这个函数来在我的angular应用程序中使用来评估ng-repeat列表中的ng-src。我需要使调用同步，以便每次调用该函数时值是正确的。问题是：

为什么这段代码会返回一个值：

  var storage = firebase.storage（）; 
 var returnVal; //导致同步问题
 var getImageUrl = function（time）{
 storage.ref（'images /'+ time +'.jpg'）。getDownloadURL（）。then（function（url）{
 returnVal = url; 
}）; 
返回returnVal; 
}; 
  

但是这不起作用：

  var storage = firebase.storage（）; 
 var getImageUrl = function（time）{
 var returnVal; //这样就是特定的函数
 storage.ref（'images /'+ time +'.jpg'）。getDownloadURL（）。then（function（url）{
 returnVal = url; //我只想返回'url'的值
}）; 
返回returnVal; 
}; 
  

如何让getImageUrl（）函数返回.then中的url？ p>

这是文档链接： https://firebase.google.com/docs/storage/web/download-files

最后，我将把它变成$ scope函数使用与此类似的内容：

 < div ng-repeat =message in messages> 
< img ng-src ={{getImageUrl（message.time）}}> 
< / div> 
  

解决方案

不是 null 或 undefined 。在继续执行下面的代码之前，您正在执行一个不会等待结果的异步调用。例如：

  var storage = firebase.storage（）; 
 //执行（1）
 var getImageUrl =函数（时间）{
 //执行（2）
 var returnVal; 
 // Execute（3）
 storage.ref（'images /'+ time +'.jpg'）。getDownloadURL（）。then（function（url）{
 // Execute未知）
 returnVal = url; 
}）; 
 //执行（4）
 return returnVal; 
}; 
 //执行（未知次数）
  

异步调用将不会返回数据，但它总是在 return returnVal; 之后，因此 returnVal 为null。

我推荐这样做：

  $ scope.images = []; 
 $ scope.messages = {//无论}; 
 for（m in $ scope.messages）{
 storage.ref（'images /'+ time +'.jpg'）。getDownloadURL（）。then（function（url）{
 //可能需要$ scope。$ apply（function（）{}）around 
 $ scope.images.push（url）; 
}）; 
 
 $ / code> 

然后在您的视图中：



 < div ng-repeat =图像中的图像> 
< img ng-src ={{image}}> 
< / div> 
  

所有这些加载的时间取决于 $ scope的大小.messages 。如果数量很大，我建议更改您的数据结构，这样您就不必多次调用数据库。

I'm writing this function to use in my angular app to evaluate ng-src in an ng-repeat list. I need to make the calls synchronous so that the value is correct each time the function is called. The problem is:

Why does this code return a value:

var storage = firebase.storage();
var returnVal; //causes sync issues
var getImageUrl = function (time) {
    storage.ref('images/' + time + '.jpg').getDownloadURL().then(function (url) {
        returnVal = url;
    });
    return returnVal;
};

But this doesn't work:

var storage = firebase.storage();
var getImageUrl = function (time) {
    var returnVal; //so that this is specific to the function
    storage.ref('images/' + time + '.jpg').getDownloadURL().then(function (url) {
        returnVal = url; //I simply want to return the value of 'url'
    });
    return returnVal;
};

Any ideas how I can make the getImageUrl() function return the url from the .then?

This is the documentation link: https://firebase.google.com/docs/storage/web/download-files

Eventually I'll turn this into a $scope function to use similar to this:

<div ng-repeat="message in messages">
    <img ng-src="{{ getImageUrl(message.time) }}">
</div>

解决方案

Neither variation of your function will ever return a value that isn't null or undefined. You are performing an asynchronous call that will not wait for the result before continuing to execute the code below it. For example:

var storage = firebase.storage();
// Execute (1)
var getImageUrl = function (time) {
    // Execute (2)
    var returnVal;
    // Execute (3)
    storage.ref('images/' + time + '.jpg').getDownloadURL().then(function (url) {
        // Execute (unknown)
        returnVal = url;
    });
    // Execute (4)
    return returnVal;
};
// Execute (unknown times)

You have no idea when the async call will return the data, but it will always be after return returnVal; therefore returnVal is null.

I recommend this:

$scope.images = [];
$scope.messages = { // whatever };
for (m in $scope.messages) {
    storage.ref('images/' + time + '.jpg').getDownloadURL().then(function (url) {
        // Might need $scope.$apply(function() {} ) surrounding
        $scope.images.push(url);
    });
}

Then in your view:

<div ng-repeat="image in images">
    <img ng-src="{{ image }}">
</div>  

The time for all this to load is dependent on the size of $scope.messages. If there are a large amount I would recommend changing your data structure so you do not have to make multiple calls to the database.

这篇关于从Firebase存储返回下载网址的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！