在Typescript中以承諾的形式返回結果

Question

如何使下面的函數返回一個Promise，以便可以在調用此函數的Page中正確處理它？

getUploads() {
    const rootDef = this.db.database.ref();
    const uploadsRef = rootDef.child('userUploads').orderByChild('time');
    const userRef = rootDef.child("userProfile");
    var uploads = [];

    uploadsRef.once("value").then((uploadSnaps) => {

      uploadSnaps.forEach((uploadSnap) => {

        var upload = uploadSnap.val();

        userRef.child(uploadSnap.val().user).once("value").then((userSnap) => {
          upload.displayName = userSnap.val().displayName;
          upload.avatar = userSnap.val().avatar;
          uploads.push(upload);
        });

      });

    });

    return uploads;
}

我嘗試了以下操作，但顯示錯誤。 我應該如何修改？

return new Promise((resolve, reject) => {
  resolve(uploads);
});

我將按如下所示調用此方法。

this.db.getUploads().then((uploads) => {
  this.allUploads = uploads;
  console.log(this.allUploads);
});

Answer 1

我想你可以圍繞你的方法的內容與

getUploads() {
    return new Promise((resolve, reject) => {
        // content of method
        resolve(uploads); // instead of "return uploads"
    });
}

Answer 2

您可以使用Promise.resolve ：

Promise.resolve（value）方法返回使用給定值解析的Promise對象。 如果該值是一個thenable（即具有“ then”方法），則返回的Promise將“跟隨”該thenable，並采用其最終狀態； 否則，返回的承諾將被履行。

如此簡單：

return Promise.resolve(uploads);

但是代碼的問題是，在uploadsRef.once("value").then(...)之前返回該值。
您應該簡單地then返回結果：

return uploadsRef.once("value").then((uploadSnaps) => {
    ...
    return uploads
};

Answer 3

這應該正確處理異步調用並返回所有上載：

getUploads() {
    const rootDef = this.db.database.ref();
    const uploadsRef = rootDef.child('userUploads').orderByChild('time');
    const userRef = rootDef.child("userProfile");

    return uploadsRef.once("value").then((uploadSnaps) => {

      return Promise.all(uploadSnaps.map(uploadSnap => {
        var upload = uploadSnap.val();

        return userRef.child(uploadSnap.val().user).once("value").then((userSnap) => {
          upload.displayName = userSnap.val().displayName;
          upload.avatar = userSnap.val().avatar;
          return upload;
        });        
      }));
    });
}