javascript - 从 Firebase 读取完成后返回数组

Question

我想将满足特定条件的所有值推送到一个数组，然后返回该数组。这是我的代码

exports.getNearbyPosts = function (myLat, myLng){
  var query = firebase.database().ref("posts/").orderByKey();
  var listOfItems = [];
  query.once("value")
    .then(function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
        var key = childSnapshot.key;
        var childData = childSnapshot.val();
        var dist = getDistanceBetweenCoord(childData.lat, childData.lng, myLat, myLng);
        if(dist < 10239820938502){
          listOfItems.push(childSnapshot);
        }
    });
  });

  return listOfItems;
}

但是由于 forEach 是异步的，而且我似乎不能对 forEach 使用回调，所以我返回的 listOfItems 将只是一个空数组。我也尝试过“.then”，但它只允许我在“.then”中做更多的事情，我想将这个数组作为变量返回给代码的其他部分。如何在执行 forEach 后返回正确的数组？

Answer 1

异步的不是 forEach (JavaScript, Node.js: is Array.forEach asynchronous?)，而是 query.once("value")。您可以通过多种方式解决此问题。使用回调、 promise 或等待/异步。

我建议阅读这个内容丰富的答案，它涵盖了更多内容和更好的示例:How do I return the response from an asynchronous call?

有回调

这里的想法是提供一个函数，一旦异步工作完成，但我们在 forEach 中的工作完成后，就可以用结果调用该函数。

exports.getNearbyPosts = function (myLat, myLng, callback){
  var query = firebase.database().ref("posts/").orderByKey();
  var listOfItems = [];
  query.once("value").then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var key = childSnapshot.key;
      var childData = childSnapshot.val();
      var dist = getDistanceBetweenCoord(childData.lat, childData.lng, myLat, myLng);
      if(dist < 10239820938502){
        listOfItems.push(childSnapshot);
      }
    });
    callback(listOfItems)
  });
}

getNearbyPosts(0, 0, (result) => {
  console.log(result);
});

promise (ES2016)

Promises 是处理异步代码的另一种方式。我建议在这里阅读它们 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises .它会比我更好地解释它们。

这是您使用 promises 的代码:

exports.getNearbyPosts = function (myLat, myLng){
  var query = firebase.database().ref("posts/").orderByKey();
  var listOfItems = [];
  return new Promise((resolve, reject) => {
    query.once("value").then(function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
        var key = childSnapshot.key;
        var childData = childSnapshot.val();
        var dist = getDistanceBetweenCoord(childData.lat, childData.lng, myLat, myLng);
        if(dist < 10239820938502){
          listOfItems.push(childSnapshot);
        }
      });
      resolve(listOfItems);
    });
  });
}

getNearbyPosts(0, 0).then(result => {
  console.log(result);
});

这实际上可以进一步简化，因为它看起来 query.once 返回一个 promise 本身。我们可以简单地返回 query.once 提供给我们的 promise ，它将在您的内部函数的 .then 之后触发一次。我们可以像这样将它们链接在一起。

exports.getNearbyPosts = function (myLat, myLng){
  var query = firebase.database().ref("posts/").orderByKey();
  var listOfItems = [];
  
  // We return the promise created by query.once
  return query.once("value").then((snapshot) => {
  
    // our inital .then will do some data filtering
    snapshot.forEach((childSnapshot) => {
      var key = childSnapshot.key;
      var childData = childSnapshot.val();
      var dist = getDistanceBetweenCoord(childData.lat, childData.lng, myLat, myLng);
      if(dist < 10239820938502){
        listOfItems.push(childSnapshot);
      }
    });
    
    // We return here to continue the chain. The next .then that picks this up will have this result
    return listOfItems;
  });
}

// Our last promise resolution in the chain, containing listOfItems
getNearbyPosts(0, 0).then(result => {
  console.log(result);
});