同步检索firebase存储URL?

时间:2017-09-10 19:02:13

标签: javascript firebase asynchronous firebase-storage

我有一个包含文件名列表的对象列表,如下所示:

Object 1
    Files
     file1:1234
     file2:2345
Object 2
     Files
     file1:456
     file2:656

我正在迭代每个对象,并在每个对象内部迭代每个文件并查询firebase存储以获取每个文件的url,以便将其作为超链接显示到数据表。

var tableData = [];
//Code to Loop over the objects
  var myApp ={ fileurls:[]};
  var i =0;
  angular.forEach(filesContainer.filenames, function(value, key) {
            storageRef.child('/myfiles/'+ value)
            .getDownloadURL().then(function(url) {
                myApp.fileurls[i] = url;
                i++;
                }
            }).catch(function(error) {
                console.log("Error");
                });
  });
tableData.push();
//Loop over object ends here
//invoke successcallbackfunction to display the tableData
successcallbackfunction(tableData);

上面代码的问题在于,由于asycnhronous firebase调用,myApp数组始终为空。如何确保只有在对象的文件循环完成后才能执行第tableData.push()行?

2 个答案:

答案 0 :(得分:0)

尝试更改此内容:

angular.forEach(filesContainer.filenames, function(value, key) {
            storageRef.child('/myfiles/'+ value)
            .getDownloadURL().then(function(url) {
                myApp.fileurls[i] = url;
                i++;
                }
            }).catch(function(error) {
                console.log("Error");
                });

为:

angular.forEach(filesContainer.filenames, function(value, key) {
            storageRef.child('/myfiles/'+ value)
            .getDownloadURL().then(function(url) {
                myApp.fileurls[i] = url;
                i++;
                  if (i == filesContainer.filenames.length) {
                       tableData.push();
                       //Loop over object ends here
                       //invoke successcallbackfunction to display the tableData
                       successcallbackfunction(tableData);
                  }

                }
            }).catch(function(error) {
                console.log("Error");
                });

所以一旦最后一次迭代完成,然后执行你想要的代码。

答案 1 :(得分:0)

Reference.getDownloadUrl() function returns a Promise。这意味着您可以使用Promise.all()收集通常的承诺:

var tableData = [];
var i =0;
var promises = [];

angular.forEach(filesContainer.filenames, function(value, key) {
    promises.push(
        storageRef.child('/myfiles/'+ value).getDownloadURL()
    });
});
Promise.all(promises).then(functions(urls) {
    var myApp ={ fileurls: urls };
    tableData.push();
    successcallbackfunction(tableData);
}).catch(function(error) {
    console.log("Error");
});