Несколько вызовов axios после входа в систему, которые должны ждать друг друга, прежде чем перенаправить пользователя на панель мониторинга в Vue.js [проблема синхронизации]

Question

Login.vue

methods: {
  loginUser() {
    this.$store.dispatch("auth/loginUser", { email: this.email, password: this.password })
    .then(() => {
      // Login ok, redirect user to dashboard
    })
    .catch(() => {
      // Show error
    })
  }
}

Auth.js

actions: {
  async loginUser ({dispatch}, {email, password}) {
      return axios.post(url, {email, password})
        .then(response => {
          dispatch('otherAction');
        })
        .catch(response => {
      })
  },
  async otherAction ({ dispatch, commit }) {
    // Do other stuff
  }
}

Я использую Vuex и действия для выполнения вызовов API. Мне нужно подождать otherAction рассылка, прежде чем перенаправить пользователя на панель инструментов. Проблема в том, что я не могу использовать await в тогдашнем вызове. axios.post в auth.js в основном проверяет учетные данные пользователя. После этого мне нужно сделать еще несколько звонков, чтобы получить все необходимые данные для показа. В настоящее время пользователь перенаправлен на панель мониторинга, но я вижу ошибки на панели мониторинга, потому что он не ждет, пока « получит дополнительные данные вызова пользователя », чтобы получить необходимые данные. Дело в сроках.

Мое мышление может быть совершенно неверным. Как я могу заставить это работать?

Answer 1

Сделайте еще одно действие, которое отправит все остальные действия и сохранит возвращенные обещания в массиве, затем используйте Promise.all ()