javascript - Firebase 数据与 JavaScript 的异步 promise 相结合

Question

我声明了一个异步获取 Firebase 数据的函数。该函数必须等到所有数据都放入对象中。由于某种原因，该函数会继续执行，而不等待对象被设置。

/** Get the data content */
const getData = async (widget, userId) => {
  let promises = [];
  let mainObject = {};
  const pivotData = {};
  const pivotName =
    'user' + widget[1].type.charAt(0).toUpperCase() + widget[1].type.slice(1);

  //Object entries
  mainObject = {
    default: widget[1],
  };
  mainObject['widgetId'] = widget[0];

  //Main listner
  const mainRef = firebase
    .database()
    .ref()
    .child(widget[1].type);

  //Pivot Listner
  const pivotRef = firebase
    .database()
    .ref()
    .child(pivotName)
    .child(userId);

  //Set promise
  promises.push(
    new Promise(async resolve => {
      pivotRef
        .once('value', snapPivot => {
          snapPivot.forEach(function(result) {
            if (result.val().widgetId === widget[0]) {
              pivotData[result.key] = result.val();
              mainObject['pivot'] = pivotData;
              mainObject['typeId'] = result.key;
              mainObject['main'] = {};
              console.log('1');

              mainRef.child(result.key).once('value', snapshot => {
                console.log('2');
                mainObject['main'][result.key] = snapshot.val();
              });
            }
          });
        })
        .then(() => {
          resolve();
          console.log('3');
        });
    })
  );

  Promise.all(promises).then(results => {
    return mainObject;
  });
};

console.logs 的预期结果是 1,2,3，但它显示的是 1,1,3,2

为什么该函数不在循环内等待 .once 函数？

Answer 1

问题是您没有等待 mainRef.child(result.key).once() 的 promise 来解决。

此外，您只将一个 promise 推送到您的 promise 数组中，而您希望推送在调用 mainRef.child(result.key).once() 时获得的 promise 。

使用await Promise.all() see MDN .

// Reference.once returns a promise Promise<DataSnapshot>
const dataSnapshot = await pivotRef.once('value');

let promises = []; 
dataSnapshot.forEach((result) => {
  const key = result.key;
  const data = result.val();

  if (data.widgetId === widget[0]) {
    pivotData[key] = data;
    mainObject['pivot'] = pivotData;
    mainObject['typeId'] = key;
    mainObject['main'] = {};
    console.log('1');

    const promise = mainRef.child(result.key)
      .once('value', snapshot => {
        console.log('2');
        mainObject['main'][result.key] = snapshot.val();
      });        
    // add promise to our promises array
    promises.push(promise);
  }
});

// wait for all the promises to be fulfilled (i.e resolved)
await Promise.all(promises);

// assuming 3 only needs to be logged once (at the end)
console.log('3');
console.log(mainObject);
return mainObject;

让我知道这是否有效!