javascript - 在 API 错误时打破 Vuex 操作中的 promise

Question

这可能是使用错误的模式来完成我所需要的问题，因此无论是我应该使用什么模式(以及该模式是什么)的答案，还是什么可以解决我当前的模式，我们都将不胜感激!

我有一个用例，在将用户路由到不同的页面/ 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。当操作中的 .catch 捕获错误时，我希望 .then 链中断，因为我不想路由我的用户，直到 API 成功为止。

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

我想我只是使用了一个愚蠢的、自行创建的模式，并且没有正确使用 Vuex 操作，因此任何正确方向的帮助将不胜感激!

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

Answer 1

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

此外，Vuex 进行像 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 block 中的代码将被执行。 Promise.all 表示所有 Promise 必须解析，而不仅仅是其中的一些。我只需从一个单独的模块导入 postNewInvoiceUpdate 即可。无需为此使用 Vuex。