Question

我正在使用React-Redux，并有一个需要针对所有页面运行的动作initializeApp：

export const initializeApp = () => async dispatch => {
  console.log("first initializeApp auth action");
  const response = await axios.get("/api/current_user");
  console.log("second initializeApp auth action");
  dispatch({
    type: SAVE_FETCHED_USER_AUTH,
    auth: response.data.auth,
    mongoDBUserId: response.data._id
  });
...
}

我有需要针对每个页面运行的特定操作，例如：

export const fetchAsks = () => async dispatch => {
  console.log("fetchAsks action");
  const response = await axios.get("/api/landing_asks");
  dispatch({
    type: SAVE_FETCHED_ASKS,
    landingAsks: response.data
  });
};

在React组件文件中，我有：

componentWillMount() {
    // run once before first render()
    this.props.initializeApp();
    this.props.fetchLandingPageSortingHatAsks();
    console.log("after both componentWillMount functions");
}

我需要initializeApp才能在fetchAsks之前完成运行，但是在控制台中，它将按以下顺序打印：

“第一个initializeApp身份验证操作”
“ fetchAsks操作”
“在两个componentWillMount函数之后”
“第二次initializeApp身份验证操作”

我需要的命令是：

“第一个initializeApp身份验证操作”
“第二次initializeApp身份验证操作”
“ fetchAsks操作”
“在两个componentWillMount函数之后”

我尝试通过在（）之前添加async来使initializeApp异步，但是动作不能异步。将fetchAsks移至componentDidMount也无法解决问题。

感谢您的帮助或指导。：）

Answer 1

首先，componentWillMount已过时-如果可以避免使用（并且可以避免使用！），则不应该使用它

但是要回答您的问题，您的函数是异步的，但是实际上您并不是在等待任何一个函数完成。你可能想要

componentWillMount() {
    // run once before first render()
    this.props.initializeApp().then(() => {
      this.props.fetchLandingPageSortingHatAsks();
      console.log("after both componentWillMount functions");
    });
}

在这里，只有在initializeApp（）完成之后，下一个函数才会在then()回调中运行。

使用回调，异步/等待和Promises是确保异步代码按特定顺序执行的唯一方法。

如何在componentWillMount中执行另一个函数之前等待函数完成？

1 个答案: