Question

这可能是使用错误的模式来完成我所需要的问题，因此，对于我应该使用哪种模式（以及该模式是什么）的答案或可以解决当前模式的问题，将不胜感激。！

我有一个用例，在将用户路由到其他页面/视图之前，我需要等待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进行像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'
    );
  }
},

如果任何Promises失败，则将执行catch块中的代码。 Promise.all表示所有承诺必须解决，而不仅仅是其中一些。我只是从单独的模块中import postNewInvoiceUpdate开始。无需为此使用Vuex。

在Vuex中违反API错误承诺

1 个答案: