在 API 错误时破坏 Vuex 操作中的承诺

Question

这可能是使用错误的模式来完成我需要的问题，所以要么回答我应该使用什么模式（以及那个模式是什么），要么解决我当前模式的方法是非常感谢！

我有一个用例，在将用户路由到另一个 page/view 之前，我需要等待 1 到许多 API 调用成功完成...这就是我正在做的事情：

// Vuex action
[POST_NEW_INVOICE_UPDATE]: ({ commit }, update) => {
    return apiEndpoints
      .postNewInvoiceUpdate(update)
      .then(() => {
        app.$Progress.finish()
        app.$Toastr.success('Invoice flagged')
      })
      .catch((error) => {
        console.error(error)
        app.$Progress.fail()
        app.$Toastr.error('There was an issue submitting your request', 'Request error')
      })
},

// In component
flag () {
    // ... simplifying for TLDR
    const promises = []
    flagSelections.forEach(selection => {
        // ... simplifying for TLDR
        promises.push(this.$store.dispatch('POST_NEW_INVOICE_UPDATE', parameters))
    })

    Promise.all(promises)
        .then(() => {
            // Route to next invoice in previous search, if search exists
            // ... simplifying for TLDR
        })
        .catch((error) => {
            console.error(error)
        })
},

我正在创建一个动作数组 POST_NEW_INVOICE_UPDATE，并在该数组上调用 Promise.all。我想要 .then 链在操作中的 .catch 捕获到错误时中断，因为我不想路由我的用户，直到 API已成功。

我相信我在 MDN 中读到 .then 即使发现错误也会继续链接，但我显然需要一些东西来防止我的用户在 API 全部成功之前被路由.

我想我只是在使用一个愚蠢的、自创的模式，并没有正确使用 Vuex 动作，所以任何在正确方向上的帮助将不胜感激！

编辑：我忘记了一些重要的事情！如果我从操作中取出代码并将其放在 promises.push 而不是调度中，代码会根据需要运行，但我讨厌打破将 Vuex 用于单个用例的模式。

Answer 1

首先，我不会纯粹使用 Vuex 来进行 API 调用。 Vuex 的目的是管理全局状态，我可以在这里看到您甚至根本没有使用 commit 来改变状态。您可以将 API 抽象为您自己的对象或函数，而无需 Vuex。但也有可能您只是精简了代码，而您实际上是在调用 commit，所以我会坚持这个假设。

此外，Vuex anti-pattern 会发出像 app.$Progress.fail() 这样的调用。 Vuex 应该对您的组件或 UI 一无所知，它唯一的工作就是管理全局状态。

以下是我的结构：

async flag() {
  const promises = [];

  flagSelections.forEach(selection => {
    promises.push(postNewInvoiceUpdate(parameters));
  });

  try {
    await Promise.all(promises);
    app.$Progress.finish();
    app.$Toastr.success('Invoice flagged');
  } catch (e) {
    console.error(error);
    app.$Progress.fail();
    app.$Toastr.error(
      'There was an issue submitting your request',
      'Request error'
    );
  }
},

如果任何 Promise 失败，catch 块中的代码将被执行。 Promise.all 意味着 all Promise 必须解决，而不仅仅是其中的一些。我只想 import postNewInvoiceUpdate 来自一个单独的模块。不需要为此使用 Vuex。

在 API 错误时破坏 Vuex 操作中的承诺

Break Promise in Vuex Action on API error

javascript

promise

vue.js

es6-promise

vuex