Question

我有几个Vuex操作，它们返回axios Promises。我想多次执行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)
}

在控制台的“网络”选项卡中，我希望能够看到Ingredients_actions调用发生了，然后看到了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)));
}

如何同步分配一组Vuex动作（等待一组稳定，然后再分配另一个）

2 个答案: