Как ждать завершения функции перед выполнением другой в componentWillMount?

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, но в консоли он печатается в следующем порядке:

1. "первое действие initializeApp auth"
2. "действие fetchAsks"
3. "после обеих функций componentWillMount"
4. «Второе действие инициализации инициализации приложения»

Мне нужен заказ:

1. "первое действие initializeApp auth"
2. «Второе действие инициализации инициализации приложения»
3. "fetchAsks action"
4. "после обеих функций componentWillMount"

Я попытался сделать initializeApp асинхронным, добавив async before (), но действия не могут быть асинхронными. Перемещение запросов fetch в 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().

Использование обратных вызовов, async / await и Promises - единственный способчтобы гарантировать выполнение асинхронного кода в определенном порядке.