Question

我正在努力实施Firebase查询承诺，我可以将生成的HTML传递到另一个函数中使用。

我有一个Firebase查询，它从数据库中的节点检索值，然后使用它创建一些HTML：

   function getElem() {
      var query = firebase.database().ref('thumbnails/' + key);
      query.once('value').then(function(childSnapshot) {
         var link = childSnapshot.child('/link').val();

         //other database stuff...

         return link;
   }).then(function(link){
         //make some boring HTML
         var elem = document.createElement('div');
         //use link value as data attribute
         elem.dataset.link = link;

         //other data setting stuff...

         return elem;
       })
   }

然后在getElem内调用

itemElements()，我的函数收集elems并将它们附加到我的网格布局中：

  function itemElements() {
      // add grid items
      var elems = [getElem(), getElem(), getElem()]; //get three elements
      // make jQuery object
      var $elems = $( elems );
      $grid.append( $elems );
  };

由于getElem()返回一个带有已解析值的promise，而不是值本身，itemElement()正在尝试将promise对象附加到网格中 - 这并非常有用。我隐约明白承诺是异步的，所以我不能仅仅要求返回值，但是我如何确保elem从getElem()返回itemElement()到helpers.sets(body)一旦承诺得到解决，使用？

Answer 1

您需要处理Promises的异步方面。试试这个：

function getElem() {
  return firebase.database().ref('...').once('value').then(function(link) {
    // ...
    return elem;
  });
}

function itemElements() {
  return Promise.all([getElem(),getElem(),getElem()]).then(function(elems) {
    var $elems = $(elems);
    $grid.append($elems);
  });
}

请注意，在getElem()中，您需要返回 Promise，以便异步可以链接在一起，并且在itemElements()中您需要调用Promise.all()等待要解析异步getElem()函数，可以使用结果。

Firebase传递查询承诺结果

1 个答案: