如何等待最里面的firebase函数的响应？

Question

我正在使用 Firebase 函数来读取 Redux 操作中的数据。问题是该函数没有等待 Firebase 函数的响应。您可以在下面看到所有功能代码。如何设置第二个 firebase 函数等待响应？

export const getSelectedGroupDetail = groupUid => dispatch => {
  dispatch({
    type: GET_SELECTED_GROUP_DETAIL_START,
  });
  firebase
    .database()
    .ref('/groups/' + groupUid)
    .once('value')
    .then(function (snapshot) {
      const membersList = _.map(snapshot.val().members, (val, uid) => ({ ...val, uid }));

      let groupMembersList = _.map(selectedGroupData.members, (val, uid) => {
    return { ...val, uid };
  });
      for (let index = 0; index < groupMembersList.length; index++) {
        firebase.database().ref('/users/' + groupMembersList[index].uid).once('value')
          .then(function (snapshot) {
            let name = snapshot.val().displayName;
            groupMembersList[index] = { ...groupMembersList[index], name };
          })
    .catch(e => console.log(e.message));
      }

      const yeniGrupDetayi = { ...snapshot.val(), uid: groupUid, membersList };
      console.log('ACTION NE YAZDI ? ===>', yeniGrupDetayi);
      dispatch({
        type: GET_SELECTED_GROUP_DETAIL_SUCCESS,
        payload: yeniGrupDetayi,
      });
      NavigationService.navigate('GroupDetail');
    })
    .catch(e => {
      dispatch({
        type: GET_SELECTED_GROUP_DETAIL_FAIL,
      });
      Alert.alert('Hata', 'Beklenmedik bir hata meydana geldi.');
    });
};

如果第二个 Firebase 函数将等待响应，memberList 将在 yeniGrupDetayi 对象内。如果第二个 Firebase 函数将等待响应，membersList 将在 yeniGrupDetayi 对象内。在操作代码的最后，FlatList 正在运行，但我在 FlatList 中看不到membersList。

Answer 1

您的问题是您通过循环调用了多个 Promise，并且在循环之后放置了单独的代码。问题是，代码不会等到您精确后才执行。

因此，要么您将调用重新组合在一个 promise 中并等待所有调用响应，要么执行以下操作：

export const getSelectedGroupDetail = groupUid => dispatch => {
      dispatch({
        type: GET_SELECTED_GROUP_DETAIL_START,
      });
  firebase
      .database()
      .ref('/groups/' + groupUid)
      .once('value')
      .then(function (snapshot) {
        const membersList = _.map(snapshot.val().members, (val, uid) => ({ ...val, uid }));

        let groupMembersList = _.map(selectedGroupData.members, (val, uid) => {
          return { ...val, uid };
        });
        for (let index = 0; index < groupMembersList.length; index++) {
          firebase.database().ref('/users/' + groupMembersList[index].uid).once('value')
              .then(function (childSnapshot) {
                let name = childSnapshot.val().displayName;
                groupMembersList[index] = { ...groupMembersList[index], name };

                if(index === groupMembersList.length -1)
                {
                  const yeniGrupDetayi = { ...snapshot.val(), uid: groupUid, membersList };
                  console.log('ACTION NE YAZDI ? ===>', yeniGrupDetayi);
                  dispatch({
                    type: GET_SELECTED_GROUP_DETAIL_SUCCESS,
                    payload: yeniGrupDetayi,
                  });
                  NavigationService.navigate('GroupDetail');
                }
              })
              .catch(e => console.log(e.message));
        }
      })
      .catch(e => {
        dispatch({
          type: GET_SELECTED_GROUP_DETAIL_FAIL,
        });
        Alert.alert('Hata', 'Beklenmedik bir hata meydana geldi.');
      });
};

它有点凌乱且不易维护，但可以解决问题

Answer 2

你可以提取你的

firebase.database().ref('/users/' + groupMembersList[index].uid).once('value')

到这样的函数：

async function getMembersListFromDB() {
  return firebase.database().ref('/users/' + groupMembersList[index].uid).once('value')
}

现在在你的 for 循环中：

for (let index = 0; index < groupMembersList.length; index++) {
  await this.getMembersListFromDB().then(function (snapshot) {
    let name = snapshot.val().displayName;
    groupMembersList[index] = { ...groupMembersList[index], name };
  })

说明：

您可以使用aysnc 和await 的组合来暂停程序的执行，直到Promise 解决。 await 关键字将告诉程序等待数据库查询执行，然后程序将继续执行

更多关于异步/等待here