云功能和Firestore将数据保存到阵列中

Question

我尝试在Google应用程序中从Cloud Firestore获取数据。 我想搜索一个对象，然后将图像的链接提取到数组中。 如果找到更多对象，则应将链接全部推入数组。

这就是我所拥有的：

let array = []; //Everything should be in here

var collectionRef = db.collection('shoes');
var query = collectionRef.where('sport', '==', 'tennis');

query.get().then(function(results) {
    if(results.empty) {
      console.log("No documents found!");   
    } else {
      // go through all results
      results.forEach(function (doc) {
        array.push(document.data().name);
      });
    }
  }).catch(function(error) {
      console.log("Error getting documents:", error);
  });



var prodpic = array[0]; // Array is not filled because in output always "undefined"

我确实想在以后的程序中使用prodpic中的img-links。 我希望我的问题很清楚，任何人都可以帮助我找到我的错误。

Answer 1

数据是从Cloud Firestore异步加载的。 这意味着，当您分配var prodpic = array[0]它尚未被加载。

通过用一些日志语句替换大多数代码，最容易看到这一点：

console.log("Before starting query");
query.get().then(function(results) {
  console.log("In query results");
})
console.log("After starting query");

运行此代码时，输​​出为：

开始查询之前

开始查询后

在查询结果中

这可能不是您所期望的，但是可以很好地解释为什么var prodpic = array[0]不起作用：尚未加载数据，所以array[0]为空。

要处理异步加载，必须确保需要数据的代码在then()回调内部 。 所以：

query.get().then(function(results) {
  if(results.empty) {
    console.log("No documents found!");   
  } else {
    // go through all results
    results.forEach(function (doc) {
      array.push(document.data().name);
    });
    var prodpic = array[0]; 
  }
}).catch(function(error) {
  console.log("Error getting documents:", error);
});

有关此的更多信息，请在以下位置阅读Doug的博客文章： https : //medium.com/google-developers/why-are-firebase-apis-asynchronous-callbacks-promises-tasks-e037a6654a93

另一个优化：如果您只关心第一个匹配的文档，则使用limit查询会更有效：

var query = collectionRef.where('sport', '==', 'tennis').limit(1);