如何在 React-Native 中按順序運行我的異步函數？

Question

我有這樣的動作：

 export const loginUser = ({ email, password }) => { return (dispatch) => { dispatch({ type: LOGIN_USER }); firebase.auth().signInWithEmailAndPassword(email, password) .then(user => { const { currentUser } = firebase.auth(); firebase.database().ref(`users/${currentUser.uid}/userInfo`) .on('value', snapshot => { const userInfo = _.map(snapshot.val(), (val, uid) => { return { ...val, uid }; }); console.log(userInfo); dispatch({ type: USERINFO_FETCHED, payload: userInfo }); }); Actions.main(); dispatch({ type: LOGIN_USER_SUCCESS, payload: user }); }) .catch(() => { dispatch({ type: LOGIN_USER_FAIL, }); }); }; };

這些函數無序運行，因為它們是異步函數。 好吧，我們都知道。 我想整理這些功能。 首先，我想運行並完成這些代碼：

 const { currentUser } = firebase.auth(); firebase.database().ref(`users/${currentUser.uid}/userInfo`) .on('value', snapshot => { const userInfo = _.map(snapshot.val(), (val, uid) => { return { ...val, uid }; }); console.log(userInfo); dispatch({ type: USERINFO_FETCHED, payload: userInfo });

完成后我想運行這一行：

 Actions.main();

那可能嗎？ 我做不到。 謝謝您的回答...

Answer 1

您需要學習如何使用諾言。 下面是關於promise的串行執行的一個很好的教程。 將您的方法包含在promise中並運行它們Promise.all。

https://decembersoft.com/posts/promises-in-serial-with-array-reduce/

Answer 2

容易解決的辦法是，嘗試使用類似Actions.main(); 這在.on('value' 。

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    dispatch({ type: LOGIN_USER });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => {
        const { currentUser } = firebase.auth();
        firebase.database().ref(`users/${currentUser.uid}/userInfo`)
        .on('value', snapshot => {
          const userInfo = _.map(snapshot.val(), (val, uid) => {
            return { ...val, uid };
          });
          console.log(userInfo);
          dispatch({ type: USERINFO_FETCHED, payload: userInfo });
          Actions.main();
        });
        dispatch({
          type: LOGIN_USER_SUCCESS,
          payload: user
        });
      })
      .catch(() => {
        dispatch({
          type: LOGIN_USER_FAIL,
        });
      });
  };
};

Answer 3

如果您希望在獲得userInfo的值后運行Actions.main() ， userInfo可以將Actions.main()代碼塊中，如下所示。

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    dispatch({ type: LOGIN_USER });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => {
        const { currentUser } = firebase.auth();
        firebase.database().ref(`users/${currentUser.uid}/userInfo`)
        .on('value', snapshot => {
          const userInfo = _.map(snapshot.val(), (val, uid) => {
            return { ...val, uid };
          });
          console.log(userInfo);
          dispatch({ type: USERINFO_FETCHED, payload: userInfo });

          Actions.main();
          dispatch({
            type: LOGIN_USER_SUCCESS,
            payload: user
          });

        });              
      })
      .catch(() => {
        dispatch({
          type: LOGIN_USER_FAIL,
        });
      });
  };
};