javascript - 尝试使用 Promises 和 .then() 从 Firebase 获取 Image-Url

Question

我正在尝试获取一些群组及其信息。我需要加入 firebase 以获取每个群聊中的最后一条消息。我已经开始工作了。现在我还必须从 firebase 存储中获取 Group-Image Url。我正在尝试使用 Promise 和 .then() 在 Promise 解决后继续。

我的想法是，对于每个组，它将使用带有 groupId 的函数 getGroupImages() 来获取图像。一旦它有了图像，就会触发 .then() 中的代码。

这是我的代码和我正在尝试做的事情:

export const getUserGroups = () => {
  return (dispatch) => {
    dispatch({ type: GET_USERS_GROUPS });
    const uid = firebase.auth().currentUser.uid;
    firebase.database().ref(`/userGroups/${uid}/`)
      .on('value', snapshot => {
        const promises = [];
        snapshot.forEach(child => {
          const children = child.val();
          const groupId = children.groupId;
          getGroupImages(groupId).then((image) => {
            children.image = image;
            const promise = firebase
              .database()
              .ref(`/groups/${groupId}/lastmessage`)
              .once('value')
              .then(snap => {
                children.lastmessage = snap.val();
                return children;
              });
              promises.unshift(promise);
          })
          .catch((e) => console.log(e));
        });
        Promise.all(promises)
        .then(groupArr => {
          dispatch({ type: GET_USERS_GROUPS_SUCCESS, payload: groupArr });
        })
        .catch((e) => console.log(e));
      });
  };
};

这是我写的 getGroupImages() 函数:

const getGroupImages = (groupId) => {
  return new Promise(() => (resolve, reject) => {
    const ref = firebase.storage().ref(`images/${groupId}/groupImg`);
    ref.getDownloadURL()
      .then((image) => {
        resolve(image);
      })
      .catch((e) => reject(e));
  })
  .catch((err) => console.log(err));
};

我对使用 promises 还很陌生，我正在尝试学习它，但在这里我真的不知道我做错了什么。

EDIT2:* 我有一些东西在工作，但我想我创造了一个怪物。我不认为这是应该的方式:

export const getUserGroups = () => {
  return (dispatch) => {
    dispatch({ type: GET_USERS_GROUPS });
    const uid = firebase.auth().currentUser.uid;
    firebase.database().ref(`/userGroups/${uid}/`)
      .on('value', snapshot => {
        const promises = [];
        const groupArr = [];
        const messages = [];
        snapshot.forEach(child => {
          const children = child.val();
          const groupId = children.groupId;
          const promise = getGroupImages(groupId)
          .then(url => {
            children.img = url;
            return children;
          })
          .catch(e => console.log(e));
          promises.unshift(promise);
        }); // </foreach>
        Promise.all(promises)
        .then(children => { // child === array with both objects
          const messages = [];
          children.map(child => {
            const groupId = child.groupId;
            const ch = child;
            const message = getLastMessages(groupId)
            .then(msg => {
              ch.lastMsg = msg;
              return ch;
            })
            .catch((e) => console.log(e));
            messages.unshift(message);
          }); // .map
          Promise.all(messages)
          .then((bla) => {
            dispatch({ type: GET_USERS_GROUPS_SUCCESS, payload: bla });
          });
        });
      });
  };
};

编辑 1 在“harshiL shah”的帮助下，我设法兑现了工作 promise 。然而，即使有图像从 promise 返回，groupArr 仍然是空的。

snapshot.forEach(child => {
 const children = child.val();
 const groupId = children.groupId;
 getGroupImages(groupId).then((image) => {
  console.log(image); // url is showing
  children.image = image;
  const promise = firebase
    .database()
    .ref(`/groups/${groupId}/lastmessage`)
    .once('value')
    .then(snap => {
     children.lastmessage = snap.val();
     return children;
    });
     promises.unshift(promise);
    });
    });
    Promise.all(promises)
    .then(groupArr => {
    console.log('groupArr');
    console.log(groupArr); // [] empty Array
    dispatch({ type: GET_USERS_GROUPS_SUCCESS, payload: groupArr });

})

Answer 1

你路过() => (resolve, reject) => { 一些代码 } 在promise中，其实就是

function() {
    return function(resolve, reject) {
        some code
    }
}

真正需要做的是

function(resolve, reject) {
    some code
}

即(resolve, reject) => { 一些代码 }

改用下面的代码。

const getGroupImages = (groupId) => {
    return new Promise((resolve, reject) => {
        const ref = firebase.storage().ref(`images/${groupId}/groupImg`);
        ref.getDownloadURL()
        .then((image) => {
            resolve(image);
            })
        .catch((e) => reject(e));
    })
    .catch((err) => console.log(err));
};

这是我能在您的代码中找到的唯一问题。我会评论它，但我没有足够的声誉。

------------ 新编辑的回答----------------

为了理解问题，假设从 firebase 获取图像需要 1 分钟的时间。 snapshot.foreach 甚至在 getGroupImages() 完成获取第一张图片之前就完成了它的执行，只有在它进入 then block 之后，获取消息的 promise 才会被添加到 promises 数组中。所以当 Promise.all(promises) 被调用时，promises 是一个空数组，你在 then block 中得到空数组(groupArr)。为了验证这个理论，你可以在 Promise.all() 之前打印 promises 数组。

下面是在这种情况下应该有效的修复。

snapshot.forEach(child => {
    const children = child.val();
    const groupId = children.groupId;
    promise = getGroupImages(groupId)
    .then((image) => {
      children.image = image;
      return firebase
        .database()
        .ref(`/groups/${groupId}/lastmessage`)
        .once('value');
    })
    .then(snap => {
      children.lastmessage = snap.val();
      return children;
    })
    .catch((e) => console.log(e));
    promises.unshift(promise);
  });

我没有任何方法来验证上面代码的工作。因此，将其视为伪代码并进行必要的调整。