Как синхронно отправить набор действий Vuex (дождаться, пока набор установится, а затем отправить другое)

Question

У меня есть пара действий Vuex, которые возвращают топор ios Обещания. Я хочу запустить действие X несколько раз, и после того, как эти действия завершатся, я хочу запустить действие Y несколько раз, вот что я попробовал:

async save() {
  const ingredients = [{ 1 }, { 2 }]
  const ingredients_actions = ingredients.map(async ing => await this.$store.dispatch('saveIngredients', ing))
  const recipes = [{ a }, { b }, { c }]
  const recipes_actions = recipes.map(async recipe => await this.$store.dispatch('saveRecipe', recipe)

  await Promise.all(ingredients_actions)
  await Promise.all(recipes_actions)
}

На вкладке сети в консоли I ожидайте, что вызовы ингридиенты-действия произойдут, а затем произойдут события recipes_actions. Вместо этого я вижу, как действия происходят повсюду, а не синхронно.

Как сделать так, чтобы все ингридиенты-действия происходили до действия рецептов? Все предложения приветствуются.

Answer 1

Это то, что ожидается?

async save() {
  const ingredients = [{ 1 }, { 2 }]
  const ingredients_actions = ingredients.map(async ing => await this.$store.dispatch('saveIngredients', ing))
  await Promise.all(ingredients_actions)

  const recipes = [{ a }, { b }, { c }]
  const recipes_actions = recipes.map(async recipe => await this.$store.dispatch('saveRecipe', recipe)
  await Promise.all(recipes_actions)
}

Answer 2

вы должны немедленно обернуть вашу карту с Promise.all(), так как ваша итерационная функция не контролируется (ошибки не будут обрабатываться). Другой подход заключается в использовании <Function>.bind().

, это может работать для вас:

async save() {
  const ingredients = [{ 1 }, { 2 }];
  const recipes = [{ a }, { b }, { c }]

  await Promise.all(ingredients.map(ingredient => this.$store.dispatch('saveIngredients', ingredient)));
  await Promise.all(recipes.map(recipe => this.$store.dispatch('saveRecipe', recipe)));
}