Question

通常，我喜欢将大多数逻辑保留在模块内部的vuex操作之后，这样我可以使组件保持清洁，并且将大多数逻辑收集在模块中（这对我来说似乎是最佳选择），问题是有时我需要在动作（通常包括axios承诺）完成后（例如，在成功执行ajax调用后清除表单）在组件数据中执行一些动作，我想我通过在vuex动作调用中添加一个then闭包并返回axios来解决了这个问题答应在我的模块中，但我注意到，那么then闭包将始终立即解决，而不是仅在一切正常时才解决200 OK。

这是我的组成部分：

stripeSourceHandler: function(sourceId)
    {
        if(this.customerSources.length == 0)
        {
            console.log('createSourceAndCustomer');
            this.createSourceAndCustomer({ id: sourceId, paymentCity:this.paymentCity, paymentAddress:this.paymentAddress })
            .then(() => {
                this.clearForm();
            });
        }
}

我的vuex模块动作：

createSourceAndCustomer({ commit }, sourceData)
    {
        commit('Loader/SET_LOADER', { status:1, message: 'Añadiendo forma de pago...' }, { root: true });
        return axios.post('/stripe/create-source-and-customer', sourceData)
        .then((response) => {
            commit('Loader/SET_LOADER', { status:2, message: response.data.message }, { root: true });
            commit('CREATE_SOURCE_AND_CUSTOMER', response.data.customer);
        }, 
        (error) => {
            commit('Loader/SET_LOADER', { status:3, errors: error, message: 'Oops, algo salio mal..' }, { root: true });
        });
    },

因此，总而言之，我希望clearForm方法仅在axios调用成功而不是始终触发时才发生。

Answer 1

您返回axios帖子，但您也可以从中链接它。如果要这样做，我建议您使用async/await模式来清理代码并避免嵌套的promise链接。这是重构的外观：

async createSourceAndCustomer({ commit }, sourceData){
  try {
    commit('Loader/SET_LOADER', { status:1, message: 'Añadiendo forma de pago...' }, { root: true });
    const { data : { message } } = await axios.post('/stripe/create-source-and-customer', sourceData)
    commit('Loader/SET_LOADER', { status:2, message }, { root: true });

    return Promise.resolve()

  } catch (err) {
    commit('Loader/SET_LOADER', { status:3, errors: error, message: 'Oops, algo salio mal..' }, { root: true });

    return Promise.reject()
  }           
},

为您提供一些清洁服务，它将解决您的问题。

编辑

如果您不想使用此模式，则可以将代码包装在新的Promise中，如下所示：

createSourceAndCustomer({ commit }, sourceData)
    {
      return new Promise ((resolve, reject) => {
        commit('Loader/SET_LOADER', { status:1, message: 'Añadiendo forma de pago...' }, { root: true });
        axios.post('/stripe/create-source-and-customer', sourceData)
        .then((response) => {
            commit('Loader/SET_LOADER', { status:2, message: response.data.message }, { root: true });
            commit('CREATE_SOURCE_AND_CUSTOMER', response.data.customer);
            resolve()
        }, 
        (error) => {
            commit('Loader/SET_LOADER', { status:3, errors: error, message: 'Oops, algo salio mal..' }, { root: true });
            reject()
        });
      })
    },

对组件内部的vuex动作做出then（）承诺

1 个答案: